feat: add ecosystem horizontal card components

src/components/Cards/HorizontalCards.tsx

+import { MaterialIcons } from "@expo/vector-icons";
+import React from "react";
+import { Text, StyleSheet, TouchableOpacity, View, Image } from "react-native";
+import Colors from "../../constants/Colors";
+import Spacer from "../../components/Spacer/Spacer";
+import { useAppSelector } from "../../hooks/reduxHooks";
+import { IUser } from "../../types/firestore/User";
+import Layout from "../../constants/Layout";
+
+type props = {
+  image: string;
+  member: string;
+  title: string;
+  rate: string;
+  onPress: () => void;
+};
+
+const HorizontalCards = ({ image, member, title, rate, onPress }: props) => {
+  const user: IUser = useAppSelector((state) => state.user);
+  return (
+    <View>
+      <TouchableOpacity onPress={() => onPress()}>
+        <View style={styles.container}>
+          <View style={styles.cardWrapper}>
+            <Image style={styles.image} source={{ uri: image }} />
+            <View style={styles.textWrapper}>
+              <View style={styles.bodyWrapper}>
+                <MaterialIcons
+                  name={"group"}
+                  style={styles.iconMember}
+                  size={30}
+                />
+                <View style={styles.textWrapper}>
+                  <Text style={styles.textMember}>{member} Anggota</Text>
+                </View>
+              </View>
+              <Spacer variant={"s"} />
+              <Text style={styles.title} numberOfLines={2} ellipsizeMode="tail">
+                {title}
+              </Text>
+              <Spacer variant={"s"} />
+              <View style={styles.bodyWrapper}>
+                <MaterialIcons
+                  name={"star"}
+                  style={styles.iconStar}
+                  size={30}
+                />
+                <View style={styles.textWrapper}>
+                  <Text style={styles.textRating}>{rate}</Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+export default HorizontalCards;
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    borderRadius: 8,
+    elevation: 4,
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: Colors.background,
+  },
+  cardWrapper: {
+    width: "100%",
+    flexDirection: "row",
+  },
+  imageWrapper: {
+    width: "100%",
+  },
+  textWrapper: {
+    width: "100%",
+    marginTop: 4,
+    paddingLeft: 8,
+  },
+  bodyWrapper: {
+    flexDirection: "row",
+    paddingTop: 8,
+  },
+  image: {
+    width: Layout.window.width * 0.4,
+    height: Layout.window.height * 0.16,
+    borderTopLeftRadius: 8,
+    borderBottomLeftRadius: 8,
+    overflow: "hidden",
+    backgroundColor: Colors.background,
+  },
+  iconMember: {
+    color: Colors.icon.tab.inactive,
+  },
+  textMember: {
+    color: Colors.text.disabled,
+    fontSize: 12,
+  },
+  title: {
+    color: Colors.text.subtitle,
+    width: Layout.window.width * 0.45,
+  },
+  iconStar: {
+    color: Colors.icon.star,
+  },
+  textRating: {
+    color: Colors.text.body,
+    fontSize: 14,
+  },
+});