mobile-darmasaba/app/(application)/notification.tsx

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
                        borderType="all"
                        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
                        borderType="all"
                        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
                        borderType="all"
                        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
                        borderType="all"
                        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
                        borderType="all"
                        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
                        borderType="all"
                        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
                        borderType="all"
                        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
                        borderType="all"
                        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
                        borderType="all"
                        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>
   )
}