upd: redesign

components/division/FiturGridItem.tsx

@@ -0,0 +1,38 @@
+import Styles from "@/constants/Styles";
+import { useTheme } from "@/providers/ThemeProvider";
+import React from "react";
+import { Pressable, View } from "react-native";
+import Text from "../Text";
+
+type Props = {
+   title: string;
+   subtitle: string;
+   icon: React.ReactNode;
+   onPress: () => void;
+};
+
+export default function FiturGridItem({ title, subtitle, icon, onPress }: Props) {
+   const { colors } = useTheme();
+
+   return (
+      <Pressable
+         onPress={onPress}
+         style={({ pressed }) => [
+            Styles.wrapGridItem,
+            {
+               backgroundColor: colors.card,
+               borderColor: colors.icon + '20',
+            },
+            pressed && { opacity: 0.7 }
+         ]}
+      >
+         <View style={[Styles.p05, { marginRight: 10 }]}>
+            {icon}
+         </View>
+         <View style={{ flex: 1 }}>
+            <Text style={[Styles.textDefaultSemiBold, { color: colors.text, lineHeight: 20 }]} numberOfLines={1}>{title}</Text>
+            <Text style={[Styles.textMediumNormal, { color: colors.dimmed, lineHeight: 15 }]} numberOfLines={1}>{subtitle}</Text>
+         </View>
+      </Pressable>
+   );
+}

components/division/fiturDivisionDetail.tsx

@@ -6,9 +6,9 @@ import { AntDesign, Feather, MaterialIcons, SimpleLineIcons } from "@expo/vector
 import { router, useLocalSearchParams } from "expo-router"
 import { useEffect, useState } from "react"
 import { View } from "react-native"
-import BorderBottomItem from "../borderBottomItem"
 import { useTheme } from "@/providers/ThemeProvider"
 import Text from "../Text"
+import FiturGridItem from "./FiturGridItem"
 
 type Props = {
    tugas: number
@@ -50,66 +50,34 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
    return (
       <View style={[Styles.mb15]}>
          <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Fitur</Text>
-         <View>
-            <View style={[Styles.rowSpaceBetween]}>
-               <BorderBottomItem
-                  bgColor={colors.card}
-                  borderType="all"
-                  icon={
-                     <View style={[Styles.p05]}>
-                        <AntDesign name="filetext1" size={28} color={colors.text} />
-                     </View>
-                  }
-                  title="Tugas"
-                  subtitle={`${data.tugas} Tugas`}
-                  width={30}
-                  onPress={() => { router.push(`/division/${id}/task?status=0`) }}
-               />
+         <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' }}>
+            <FiturGridItem
+               title="Tugas"
+               subtitle={`${data.tugas} Tugas`}
+               icon={<AntDesign name="filetext1" size={28} color={colors.text} />}
+               onPress={() => { router.push(`/division/${id}/task?status=0`) }}
+            />
 
-               <BorderBottomItem
-                  bgColor={colors.card}
-                  borderType="all"
-                  icon={
-                     <View style={[Styles.p05]}>
-                        <Feather name="paperclip" size={28} color={colors.text} />
-                     </View>
-                  }
-                  title="Dokumen"
-                  subtitle={`${data.dokumen} File`}
-                  width={30}
-                  onPress={() => { router.push(`/division/${id}/document`) }}
-               />
-            </View>
+            <FiturGridItem
+               title="Dokumen"
+               subtitle={`${data.dokumen} File`}
+               icon={<Feather name="paperclip" size={28} color={colors.text} />}
+               onPress={() => { router.push(`/division/${id}/document`) }}
+            />
 
-            <View style={[Styles.rowSpaceBetween]}>
-               <BorderBottomItem
-                  bgColor={colors.card}
-                  borderType="all"
-                  icon={
-                     <View style={[Styles.p05]}>
-                        <SimpleLineIcons name="bubbles" size={28} color={colors.text} />
-                     </View>
-                  }
-                  title="Diskusi"
-                  subtitle={`${data.diskusi} Diskusi`}
-                  width={30}
-                  onPress={() => { router.push(`/division/${id}/discussion?active=true`) }}
-               />
+            <FiturGridItem
+               title="Diskusi"
+               subtitle={`${data.diskusi} Diskusi`}
+               icon={<SimpleLineIcons name="bubbles" size={28} color={colors.text} />}
+               onPress={() => { router.push(`/division/${id}/discussion?active=true`) }}
+            />
 
-               <BorderBottomItem
-                  bgColor={colors.card}
-                  borderType="all"
-                  icon={
-                     <View style={[Styles.p05]}>
-                        <AntDesign name="calendar" size={28} color={colors.text} />
-                     </View>
-                  }
-                  title="Kalender"
-                  subtitle={`${data.kalender} Acara`}
-                  width={30}
-                  onPress={() => { router.push(`/division/${id}/calendar`) }}
-               />
-            </View>
+            <FiturGridItem
+               title="Kalender"
+               subtitle={`${data.kalender} Acara`}
+               icon={<AntDesign name="calendar" size={28} color={colors.text} />}
+               onPress={() => { router.push(`/division/${id}/calendar`) }}
+            />
          </View>
       </View>
    )