From 3372d4df23630af3a461175c2d0ad131c7b1eb87 Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Thu, 27 Feb 2025 11:01:52 +0800
Subject: [PATCH] upd: notifikasi

Deskripsi:
- update ui page notifikasi

No Issues
---
 app/(application)/_layout.tsx      |   2 +
 app/(application)/notification.tsx | 119 +++++++++++++++++++++++++++++
 app/(application)/profile.tsx      |   9 +++
 app/(application)/search.tsx       |  10 +--
 components/borderBottomItem.tsx    |   2 +-
 constants/Styles.ts                |   4 +-
 6 files changed, 138 insertions(+), 8 deletions(-)
 create mode 100644 app/(application)/notification.tsx
 create mode 100644 app/(application)/profile.tsx

diff --git a/app/(application)/_layout.tsx b/app/(application)/_layout.tsx
index 305ee80..9f2136a 100644
--- a/app/(application)/_layout.tsx
+++ b/app/(application)/_layout.tsx
@@ -9,6 +9,8 @@ export default function RootLayout() {
             <Stack.Screen name="home" options={{ title: 'Home' }} />
             <Stack.Screen name="feature" options={{ title: 'Fitur' }} />
             <Stack.Screen name="search" options={{ title: 'Pencarian' }} />
+            <Stack.Screen name="notification" options={{ title: 'Notifikasi' }} />
+            <Stack.Screen name="profile" options={{ title: 'Profile' }} />
          </Stack>
          <StatusBar style="light" />
       </>
diff --git a/app/(application)/notification.tsx b/app/(application)/notification.tsx
new file mode 100644
index 0000000..fcaf809
--- /dev/null
+++ b/app/(application)/notification.tsx
@@ -0,0 +1,119 @@
+import BorderBottomItem from "@/components/borderBottomItem";
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import { ColorsStatus } from "@/constants/ColorsStatus";
+import Styles from "@/constants/Styles";
+import { Feather } from "@expo/vector-icons";
+import { router, Stack } from "expo-router";
+import { SafeAreaView, ScrollView, View } from "react-native";
+
+export default function Notification() {
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Pencarian',
+               headerTitleAlign: 'center'
+            }}
+         />
+         <ScrollView>
+            <View style={[Styles.p15]}>
+               <View style={[Styles.wrapPaper, Styles.mb100]}>
+                  <View style={[Styles.mb05]}>
+                     <BorderBottomItem
+                        icon={
+                           <View style={[Styles.iconContent, ColorsStatus.primary]}>
+                              <Feather name="bell" size={25} color="white" />
+                           </View>
+                        }
+                        title="TU dan Umum"
+                        rightTopInfo="16 Feb 2025"
+                        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
+                     />
+                     <BorderBottomItem
+                        icon={
+                           <View style={[Styles.iconContent, ColorsStatus.primary]}>
+                              <Feather name="bell" size={25} color="white" />
+                           </View>
+                        }
+                        title="TU dan Umum"
+                        rightTopInfo="16 Feb 2025"
+                        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
+                     />
+                     <BorderBottomItem
+                        icon={
+                           <View style={[Styles.iconContent, ColorsStatus.primary]}>
+                              <Feather name="bell" size={25} color="white" />
+                           </View>
+                        }
+                        title="TU dan Umum"
+                        rightTopInfo="16 Feb 2025"
+                        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
+                     />
+                     <BorderBottomItem
+                        icon={
+                           <View style={[Styles.iconContent, ColorsStatus.primary]}>
+                              <Feather name="bell" size={25} color="white" />
+                           </View>
+                        }
+                        title="TU dan Umum"
+                        rightTopInfo="16 Feb 2025"
+                        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
+                     />
+                     <BorderBottomItem
+                        icon={
+                           <View style={[Styles.iconContent, ColorsStatus.primary]}>
+                              <Feather name="bell" size={25} color="white" />
+                           </View>
+                        }
+                        title="TU dan Umum"
+                        rightTopInfo="16 Feb 2025"
+                        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
+                     />
+                     <BorderBottomItem
+                        icon={
+                           <View style={[Styles.iconContent, ColorsStatus.primary]}>
+                              <Feather name="bell" size={25} color="white" />
+                           </View>
+                        }
+                        title="TU dan Umum"
+                        rightTopInfo="16 Feb 2025"
+                        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
+                     />
+                     <BorderBottomItem
+                        icon={
+                           <View style={[Styles.iconContent, ColorsStatus.primary]}>
+                              <Feather name="bell" size={25} color="white" />
+                           </View>
+                        }
+                        title="TU dan Umum"
+                        rightTopInfo="16 Feb 2025"
+                        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
+                     />
+                     <BorderBottomItem
+                        icon={
+                           <View style={[Styles.iconContent, ColorsStatus.primary]}>
+                              <Feather name="bell" size={25} color="white" />
+                           </View>
+                        }
+                        title="TU dan Umum"
+                        rightTopInfo="16 Feb 2025"
+                        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
+                     />
+                     <BorderBottomItem
+                        icon={
+                           <View style={[Styles.iconContent, ColorsStatus.primary]}>
+                              <Feather name="bell" size={25} color="white" />
+                           </View>
+                        }
+                        title="TU dan Umum"
+                        rightTopInfo="16 Feb 2025"
+                        desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum temporibus"
+                     />
+                  </View>
+               </View>
+            </View>
+         </ScrollView>
+      </SafeAreaView>
+   )
+}
\ No newline at end of file
diff --git a/app/(application)/profile.tsx b/app/(application)/profile.tsx
new file mode 100644
index 0000000..19e7738
--- /dev/null
+++ b/app/(application)/profile.tsx
@@ -0,0 +1,9 @@
+import { Text, View } from "react-native";
+
+export default function Profile() {
+   return (
+      <View>
+         <Text>Profile</Text>
+      </View>
+   )
+}
\ No newline at end of file
diff --git a/app/(application)/search.tsx b/app/(application)/search.tsx
index 6dde48a..1f802ee 100644
--- a/app/(application)/search.tsx
+++ b/app/(application)/search.tsx
@@ -61,7 +61,7 @@ export default function Search() {
                         <BorderBottomItem
                            icon={
                               <View style={[Styles.iconContent, ColorsStatus.primary]}>
-                                 <MaterialIcons name="group" size={30} color="white" />
+                                 <MaterialIcons name="group" size={25} color="white" />
                               </View>
                            }
                            title="TU dan Umum"
@@ -70,7 +70,7 @@ export default function Search() {
                         <BorderBottomItem
                            icon={
                               <View style={[Styles.iconContent, ColorsStatus.primary]}>
-                                 <MaterialIcons name="group" size={30} color="white" />
+                                 <MaterialIcons name="group" size={25} color="white" />
                               </View>
                            }
                            title="TU dan Umum"
@@ -82,7 +82,7 @@ export default function Search() {
                         <BorderBottomItem
                            icon={
                               <View style={[Styles.iconContent, ColorsStatus.primary]}>
-                                 <AntDesign name="areachart" size={30} color="white" />
+                                 <AntDesign name="areachart" size={25} color="white" />
                               </View>
                            }
                            title="Kerja Bakti"
@@ -91,7 +91,7 @@ export default function Search() {
                         <BorderBottomItem
                            icon={
                               <View style={[Styles.iconContent, ColorsStatus.primary]}>
-                                 <AntDesign name="areachart" size={30} color="white" />
+                                 <AntDesign name="areachart" size={25} color="white" />
                               </View>
                            }
                            title="Pasar Ramadhan"
@@ -100,7 +100,7 @@ export default function Search() {
                         <BorderBottomItem
                            icon={
                               <View style={[Styles.iconContent, ColorsStatus.primary]}>
-                                 <AntDesign name="areachart" size={30} color="white" />
+                                 <AntDesign name="areachart" size={25} color="white" />
                               </View>
                            }
                            title="Pasar Ramadhan"
diff --git a/components/borderBottomItem.tsx b/components/borderBottomItem.tsx
index b63b334..f9d16be 100644
--- a/components/borderBottomItem.tsx
+++ b/components/borderBottomItem.tsx
@@ -18,7 +18,7 @@ export default function BorderBottomItem({ title, subtitle, icon, desc, onPress,
             <View style={[Styles.rowSpaceBetween, { width: '85%' }]}>
                <View style={[Styles.ml10]}>
                   <Text style={[Styles.textDefaultSemiBold]}>{title}</Text>
-                  <Text style={[Styles.textMediumNormal]}>{subtitle}</Text>
+                  {subtitle && <Text style={[Styles.textMediumNormal]}>{subtitle}</Text>}
                </View>
                {
                   rightTopInfo && <Text style={[Styles.textInformation]}>{rightTopInfo}</Text>
diff --git a/constants/Styles.ts b/constants/Styles.ts
index 842af3f..5b2e598 100644
--- a/constants/Styles.ts
+++ b/constants/Styles.ts
@@ -249,8 +249,8 @@ const Styles = StyleSheet.create({
       borderBottomWidth: 1,
    },
    userProfileSmall: {
-      width: 50,
-      height: 50,
+      width: 48,
+      height: 48,
       borderRadius: 100
    },
    iconContent: {