feat: create carousel VerticalCard and category with PlainButton

src/components/carousel/CategoryHorizontalCarousel.tsx

+import React from "react";
+import { StyleSheet, View, FlatList, ScrollView } from "react-native";
+import Spacer from "../Spacer/Spacer";
+import ArrowlessPlainButton from "../button/ArrowlessPlainButton";
+
+type props = {
+  list: { id: string; name: string }[];
+};
+
+const CategoryHorizontalCarousel = ({ list }: props) => {
+  return (
+    <ScrollView
+      horizontal={true}
+      showsHorizontalScrollIndicator={false}
+      style={styles.carousel}
+    >
+      <FlatList
+        data={list}
+        renderItem={({ item }) => {
+          return (
+            <View style={styles.slide}>
+              <ArrowlessPlainButton content={item.name} onPress={null} />
+            </View>
+          );
+        }}
+        numColumns={Math.ceil(list.length / 2)}
+        keyExtractor={(item) => item.id}
+        ItemSeparatorComponent={() => <Spacer variant={"l"} />}
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+      />
+      <Spacer variant={"l"} />
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  carousel: {
+    flex: 1,
+    flexDirection: "row",
+  },
+  slide: {
+    width: 288,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingRight: 16,
+  },
+});
+
+export default CategoryHorizontalCarousel;

src/components/carousel/VerticalEcosystemCarousel.tsx

+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",
+  },
+});
+
+export default VerticalEcosystemCarousel;

src/types/firestore/ecosystem.ts

-export type IEcosystem = {
-  item: {
-    id?: string;
-    image: string;
-    member: string;
-    title: string;
-    rate: string;
-  };
-};