upd: search

Deskripsi:
- ui search

NoIssues

app/(application)/_layout.tsx

@@ -7,6 +7,8 @@ export default function RootLayout() {
       <>
          <Stack screenOptions={Headers.shadow}>
             <Stack.Screen name="home" options={{ title: 'Home' }} />
+            <Stack.Screen name="feature" options={{ title: 'Fitur' }} />
+            <Stack.Screen name="search" options={{ title: 'Pencarian' }} />
          </Stack>
          <StatusBar style="light" />
       </>

app/(application)/search.tsx

@@ -0,0 +1,108 @@
+import BorderBottomItem from "@/components/borderBottomItem";
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import { InputForm } from "@/components/inputForm";
+import { ColorsStatus } from "@/constants/ColorsStatus";
+import Styles from "@/constants/Styles";
+import { AntDesign, Feather, MaterialIcons } from "@expo/vector-icons";
+import { router, Stack } from "expo-router";
+import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";
+
+export default function Search() {
+   return (
+      <>
+         <SafeAreaView>
+            <Stack.Screen
+               options={{
+                  headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+                  headerTitle: 'Pencarian',
+                  headerTitleAlign: 'center'
+               }}
+            />
+            <ScrollView>
+               <View style={[Styles.p15]}>
+                  <InputForm
+                     type="default"
+                     placeholder="Pencarian"
+                     round
+                     itemLeft={<Feather name="search" size={20} color="grey" />}
+                  />
+                  <View style={[Styles.wrapPaper]}>
+                     <View style={[Styles.mb30]}>
+                        <Text>ANGGOTA</Text>
+                        <BorderBottomItem
+                           icon={<Image
+                              source={require("../../assets/images/user.jpeg")}
+                              style={[Styles.userProfileSmall]}
+                           />}
+                           title="Amalia Dwi"
+                           subtitle="Dinas - Bendaraha"
+                        />
+                        <BorderBottomItem
+                           icon={<Image
+                              source={require("../../assets/images/user.jpeg")}
+                              style={[Styles.userProfileSmall]}
+                           />}
+                           title="Amalia Dwi"
+                           subtitle="Dinas - Bendaraha"
+                        />
+
+                        <BorderBottomItem
+                           icon={<Image
+                              source={require("../../assets/images/user.jpeg")}
+                              style={[Styles.userProfileSmall]}
+                           />}
+                           title="Amalia Dwi"
+                           subtitle="Dinas - Bendaraha"
+                        />
+                     </View>
+
+                     <View style={[Styles.mb30]}>
+                        <Text>DIVISI</Text>
+                        <BorderBottomItem
+                           icon={
+                              <View style={[Styles.iconContent, ColorsStatus.primary]}>
+                                 <MaterialIcons name="group" size={30} color="white" />
+                              </View>
+                           }
+                           title="TU dan Umum"
+                           subtitle="Dinas"
+                        />
+                        <BorderBottomItem
+                           icon={
+                              <View style={[Styles.iconContent, ColorsStatus.primary]}>
+                                 <MaterialIcons name="group" size={30} color="white" />
+                              </View>
+                           }
+                           title="TU dan Umum"
+                           subtitle="Dinas"
+                        />
+                     </View>
+                     <View style={[Styles.mb30]}>
+                        <Text>KEGIATAN</Text>
+                        <BorderBottomItem
+                           icon={
+                              <View style={[Styles.iconContent, ColorsStatus.primary]}>
+                                  <AntDesign name="areachart" size={30} color="white" />
+                              </View>
+                           }
+                           title="Kerja Bakti"
+                           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>
+         </SafeAreaView>
+      </>
+   )
+}

components/borderBottomItem.tsx

@@ -0,0 +1,29 @@
+import Styles from "@/constants/Styles";
+import { Pressable, Text, View } from "react-native";
+
+type Props = {
+   title: string
+   subtitle?: string
+   icon: React.ReactNode
+   desc?: string
+   onPress?: () => void
+}
+
+export default function BorderBottomItem({ title, subtitle, icon, desc, onPress }: Props) {
+   return (
+      <Pressable style={[Styles.wrapItemBorderBottom]} onPress={onPress}>
+         <View style={[Styles.rowItemsCenter]}>
+            {icon}
+            <View style={[Styles.rowSpaceBetween]}>
+               <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>
+            </View>
+
+         </View>
+         {desc && <Text style={[Styles.textDefault, Styles.mt05, { textAlign: 'justify' }]}>{desc}</Text>}
+      </Pressable>
+   )
+}

components/home/headerRightHome.tsx

@@ -7,7 +7,7 @@ import Styles from "@/constants/Styles";
 export function HeaderRightHome() {
    return (
       <View style={[Styles.rowSpaceBetween, { width: 140 }]}>
-         <ButtonHeader item={<Feather name="search" size={20} color="white" />} onPress={() => { router.push('/') }} />
+         <ButtonHeader item={<Feather name="search" size={20} color="white" />} onPress={() => { router.push('/search') }} />
          <ButtonHeader item={<Feather name="bell" size={20} color="white" />} onPress={() => { router.push('/') }} />
          <ButtonHeader item={<Feather name="user" size={20} color="white" />} onPress={() => { router.push('/') }} />
       </View>

constants/Styles.ts

@@ -8,11 +8,11 @@ const Styles = StyleSheet.create({
       padding: 20,
    },
    textDefault: {
-      fontSize: 16,
+      fontSize: 15,
       lineHeight: 24,
    },
    textDefaultSemiBold: {
-      fontSize: 16,
+      fontSize: 15,
       lineHeight: 24,
       fontWeight: '600',
    },
@@ -80,17 +80,20 @@ const Styles = StyleSheet.create({
    mt05: {
       marginTop: 5
    },
-   mr05:{
+   mr05: {
       marginRight: 5
    },
    mr10: {
       marginRight: 10
    },
+   ml10: {
+      marginLeft: 10
+   },
    ph15: {
       paddingHorizontal: 15,
    },
-   p15:{
+   p15: {
-      padding:15
+      padding: 15
    },
    round30: {
       borderRadius: 30
@@ -236,6 +239,20 @@ const Styles = StyleSheet.create({
       borderColor: '#d6d8f6',
       borderWidth: 1,
       marginBottom: 10
+   },
+   wrapItemBorderBottom: {
+      padding: 10,
+      borderColor: '#d6d8f6',
+      borderBottomWidth: 1,
+   },
+   userProfileSmall: {
+      width: 50,
+      height: 50,
+      borderRadius: 100
+   },
+   iconContent: {
+      padding: 10,
+      borderRadius: 100,
    }
 })