Fakultas Ilmu Komputer UI

VerticalEcosystemCarousel.tsx 1.34 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
import React from "react";
import { StyleSheet, View, FlatList, ScrollView } from "react-native";
import Spacer from "../Spacer/Spacer";
import VerticalCard from "../Cards/VerticalCard";

type props = {
  list: {
    id: string;
    name: string;
    pic: string;
    followerCount: number;
  }[];
};

const VerticalEcosystemCarousel = ({ list }: props) => {
  return (
    <ScrollView
      horizontal={true}
      showsHorizontalScrollIndicator={false}
      style={styles.carousel}
    >
      <FlatList
        horizontal={true}
        data={list}
        renderItem={({ item }) => {
          return (
            <View style={styles.slide}>
              <VerticalCard
                members={item.followerCount}
                title={item.name}
                imageSource={item.pic}
                onPressFunction={null}
              />
            </View>
          );
        }}
        ItemSeparatorComponent={() => <Spacer variant={"l"} />}
        keyExtractor={(item) => item.id}
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}
      />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  carousel: {
    flex: 1,
    flexDirection: "row",
  },
  slide: {
    width: 210,
    justifyContent: "center",
    alignItems: "center",
55
    marginRight: 16,
56
57
58
59
  },
});

export default VerticalEcosystemCarousel;