Vertical Card Component

src/components/Cards/VerticalCard.tsx

+import { MaterialIcons } from "@expo/vector-icons";
+import React from "react";
+import { View, Text, StyleSheet, Dimensions, Image } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import Colors from "../../constants/Colors";
+import Spacer from "../Spacer/Spacer";
+
+type props = {
+  imageSource?: string;
+  members: number;
+  title: string;
+  onPressFunction: () => void;
+};
+
+const VerticalCard = ({
+  imageSource,
+  members,
+  title,
+  onPressFunction,
+}: props) => {
+  return (
+    <View testID="VerticalCard">
+      <TouchableOpacity
+        onPress={() => onPressFunction()}
+        style={styles.touchableContainer}
+      >
+        <View style={styles.cardContainer}>
+          <View style={styles.contentContainer}>
+            <View style={styles.imageContainer}>
+              <Image style={styles.image} source={{ uri: imageSource }} />
+            </View>
+            <Spacer variant="m" />
+            <View style={styles.textContainer} testID="textContainer">
+              <View style={styles.membersContainer} testID="membersContainer">
+                <MaterialIcons
+                  testID="groupIcon"
+                  name={"group"}
+                  size={18}
+                  style={styles.icon}
+                />
+                <Text style={styles.membersText} testID="membersText">
+                  {" "}
+                  {members} Anggota
+                </Text>
+              </View>
+              <Spacer variant="m" />
+              <View style={styles.titleContainer} testID="titleContainer">
+                <Text style={styles.titleText} testID="titleText">
+                  {title}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const deviceWidth = Math.round(Dimensions.get("window").width);
+const containerDimension = deviceWidth * 0.51;
+
+const styles = StyleSheet.create({
+  touchableContainer: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.3,
+    shadowRadius: 6,
+    elevation: 4,
+  },
+  cardContainer: {
+    width: containerDimension,
+    height: containerDimension,
+    color: Colors.background,
+    borderRadius: 8,
+    overflow: "hidden",
+  },
+  contentContainer: {
+    height: "100%",
+    width: "100%",
+    backgroundColor: "#fff",
+  },
+  icon: {
+    color: Colors.text.disabled,
+    fontSize: 15,
+  },
+  membersText: {
+    color: Colors.text.disabled,
+    fontSize: 12,
+    fontWeight: "300",
+  },
+  imageContainer: {
+    height: "53.6%",
+    width: "100%",
+    backgroundColor: Colors.form.disabled.bg,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  image: {
+    height: "100%",
+    width: "100%",
+  },
+  membersContainer: {
+    flexDirection: "row",
+  },
+  titleContainer: {
+    flexDirection: "row",
+  },
+  textContainer: {
+    paddingHorizontal: 8,
+    paddingBottom: 8,
+  },
+  titleText: {
+    fontSize: 14,
+    fontWeight: "300",
+  },
+});
+
+export default VerticalCard;