upd: search page

Deskripsi:
- update ui search page
- update component ui borderbottom item
- update style

No Issues

app/(application)/search.tsx

@@ -26,7 +26,7 @@ export default function Search() {
                      round
                      itemLeft={<Feather name="search" size={20} color="grey" />}
                   />
-                  <View style={[Styles.wrapPaper]}>
+                  <View style={[Styles.wrapPaper, Styles.mb100]}>
                      <View style={[Styles.mb30]}>
                         <Text>ANGGOTA</Text>
                         <BorderBottomItem
@@ -77,12 +77,12 @@ export default function Search() {
                            subtitle="Dinas"
                         />
                      </View>
-                     <View style={[Styles.mb30]}>
+                     <View style={[Styles.mb05]}>
                         <Text>KEGIATAN</Text>
                         <BorderBottomItem
                            icon={
                               <View style={[Styles.iconContent, ColorsStatus.primary]}>
-                                  <AntDesign name="areachart" size={30} color="white" />
+                                 <AntDesign name="areachart" size={30} color="white" />
                               </View>
                            }
                            title="Kerja Bakti"
@@ -91,14 +91,22 @@ export default function Search() {
                         <BorderBottomItem
                            icon={
                               <View style={[Styles.iconContent, ColorsStatus.primary]}>
-                                  <AntDesign name="areachart" size={30} color="white" />
+                                 <AntDesign name="areachart" size={30} color="white" />
+                              </View>
+                           }
+                           title="Pasar Ramadhan"
+                           subtitle="Dinas"
+                        />
+                        <BorderBottomItem
+                           icon={
+                              <View style={[Styles.iconContent, ColorsStatus.primary]}>
+                                 <AntDesign name="areachart" size={30} color="white" />
                               </View>
                            }
                            title="Pasar Ramadhan"
                            subtitle="Dinas"
                         />
                      </View>
-
                   </View>
                </View>
             </ScrollView>

components/borderBottomItem.tsx

@@ -6,20 +6,23 @@ type Props = {
    subtitle?: string
    icon: React.ReactNode
    desc?: string
+   rightTopInfo?: string
    onPress?: () => void
 }
 
-export default function BorderBottomItem({ title, subtitle, icon, desc, onPress }: Props) {
+export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, rightTopInfo }: Props) {
    return (
       <Pressable style={[Styles.wrapItemBorderBottom]} onPress={onPress}>
          <View style={[Styles.rowItemsCenter]}>
             {icon}
-            <View style={[Styles.rowSpaceBetween]}>
+            <View style={[Styles.rowSpaceBetween, { width: '85%' }]}>
                <View style={[Styles.ml10]}>
                   <Text style={[Styles.textDefaultSemiBold]}>{title}</Text>
                   <Text style={[Styles.textMediumNormal]}>{subtitle}</Text>
                </View>
-               <Text style={[Styles.textInformation]}>3 Feb 2025</Text>
+               {
+                  rightTopInfo && <Text style={[Styles.textInformation]}>{rightTopInfo}</Text>
+               }
             </View>
 
          </View>

constants/Styles.ts

@@ -68,6 +68,9 @@ const Styles = StyleSheet.create({
    mb30: {
       marginBottom: 30
    },
+   mb100:{
+      marginBottom: 100
+   },
    mv05: {
       marginVertical: 5
    },