Fakultas Ilmu Komputer UI

CategoryEcosystemListScreen.tsx 3.18 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import { FlatList, SafeAreaView, StyleSheet } from "react-native";
import React, { useState } from "react";
import HorizontalCards from "../components/Cards/HorizontalCards";
import { useNavigation } from "@react-navigation/core";
import Colors from "../constants/Colors";
import { View } from "../components/Themed";
import Spacer from "../components/Spacer/Spacer";
import { IEcosystem } from "../types/firestore/ecosystems";
import IconForm from "../components/Forms/IconForm";

const CategoryEcosystemListScreen = () => {
  const nav = useNavigation();
  const [search, setSearch] = useState("");
  const [listData, setListData] = useState([
    {
      id: "1",
      image:
        "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
      member: "100",
      title: "Pengolahan Kerupuk",
      rate: "5",
    },
    {
      id: "2",
      image:
        "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
      member: "120",
      title: "Pengolahan Kerupuk",
      rate: "4.9",
    },
    {
      id: "3",
      image:
        "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
      member: "130",
      title: "Pengolahan Kerupuk",
      rate: "5",
    },
    {
      id: "4",
      image:
        "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
      member: "140",
      title: "Pengolahan Kerupuk",
      rate: "4.4",
    },
    {
      id: "5",
      image:
        "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
      member: "100",
      title: "Pengolahan Kerupuk",
      rate: "4",
    },
    {
      id: "6",
      image:
        "https://asset.kompas.com/crops/O_Vgje1nMEqUCaDexq2UJdbyT14=/9x1:989x655/750x500/data/photo/2020/02/21/5e5008d10c825.jpg",
      member: "10",
      title: "Pengolahan Kerupuk",
      rate: "5",
    },
  ]);

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <IconForm
          text={search}
          setText={setSearch}
          placeholder={"Cari di kategori ini"}
          search
        />
      </View>
      <Spacer variant={"xl"} />
      <FlatList
        data={listData}
        renderItem={({ item }) => {
          return (
            <View style={styles.horizontalCard}>
              <HorizontalCards
                image={item.image}
                member={item.member}
                title={item.title}
                rate={item.rate}
                onPress={null}
              />
            </View>
          );
        }}
        keyExtractor={(item) => item.id}
        ItemSeparatorComponent={() => <Spacer variant={"l"} />}
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 24,
    backgroundColor: Colors.background,
  },
  horizontalCard: {
    paddingHorizontal: 4,
    paddingTop: 2,
  },
});

export default CategoryEcosystemListScreen;