upd: profile

Deskripsi:
- ui profile
- ui button right header
- ui alert konfirmasi

No Issues

app/(application)/profile.tsx

@@ -1,9 +1,98 @@
-import { Text, View } from "react-native";
+import AlertKonfirmasi from "@/components/alertKonfirmasi";
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import { ButtonHeader } from "@/components/buttonHeader";
+import Styles from "@/constants/Styles";
+import { AntDesign, MaterialCommunityIcons, MaterialIcons, Octicons } from "@expo/vector-icons";
+import { router, Stack } from "expo-router";
+import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";
 
 export default function Profile() {
    return (
-      <View>
+      <SafeAreaView>
-         <Text>Profile</Text>
+         <Stack.Screen
-      </View>
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Profile',
+               headerTitleAlign: 'center',
+               headerRight: () => <ButtonHeader
+                  item={<Octicons name="sign-out" size={20} color="white" />}
+                  onPress={() => {
+                     AlertKonfirmasi({
+                        title: 'Keluar',
+                        desc: 'Apakah anda yakin ingin keluar?',
+                        onPress: () => { router.push('/') }
+                     })
+                  }}
+               />
+            }}
+         />
+         <ScrollView>
+            <View style={{ flexDirection: 'column' }}>
+               <View style={[Styles.wrapHeadViewMember]}>
+                  <Image
+                     source={require("../../assets/images/user.jpeg")}
+                     style={[Styles.userProfileBig]}
+                  />
+                  <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10]}>Putri Ayu Dewi</Text>
+                  <Text style={[Styles.textMediumNormal, Styles.cWhite]}>Super Admin</Text>
+               </View>
+               <View style={[Styles.p15]}>
+                  <View style={[Styles.rowSpaceBetween]}>
+                     <Text style={[Styles.textDefaultSemiBold]}>Informasi</Text>
+                     <Text style={[Styles.textLink]}>Edit</Text>
+                  </View>
+                  <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
+                     <View style={[Styles.rowItemsCenter]}>
+                        <MaterialCommunityIcons name="card-account-details" size={22} color="black" style={[Styles.mr10]} />
+                        <Text style={[Styles.textDefault]}>NIK</Text>
+                     </View>
+                     <Text style={[Styles.textDefaultSemiBold]}>123456789</Text>
+                  </View>
+
+                  <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
+                     <View style={[Styles.rowItemsCenter]}>
+                        <AntDesign name="tags" size={25} color="black" style={[Styles.mr10]} />
+                        <Text style={[Styles.textDefault]}>Lembaga Desa</Text>
+                     </View>
+                     <Text style={[Styles.textDefaultSemiBold]}>Dinas</Text>
+                  </View>
+
+                  <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
+                     <View style={[Styles.rowItemsCenter]}>
+                        <MaterialCommunityIcons name="account-tie" size={25} color="black" style={[Styles.mr10]} />
+                        <Text style={[Styles.textDefault]}>Jabatan</Text>
+                     </View>
+                     <Text style={[Styles.textDefaultSemiBold]}>Bendahara</Text>
+                  </View>
+
+                  <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
+                     <View style={[Styles.rowItemsCenter]}>
+                        <MaterialIcons name="phone" size={25} color="black" style={[Styles.mr10]} />
+                        <Text style={[Styles.textDefault]}>No Telepon</Text>
+                     </View>
+                     <Text style={[Styles.textDefaultSemiBold]}>09482903842</Text>
+                  </View>
+
+                  <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
+                     <View style={[Styles.rowItemsCenter]}>
+                        <MaterialIcons name="email" size={25} color="black" style={[Styles.mr10]} />
+                        <Text style={[Styles.textDefault]}>Email</Text>
+                     </View>
+                     <Text style={[Styles.textDefaultSemiBold]}>ayu@gmail.com</Text>
+                  </View>
+
+
+                  <View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.mt10]}>
+                     <View style={[Styles.rowItemsCenter]}>
+                        <MaterialCommunityIcons name="gender-male-female" size={25} color="black" style={[Styles.mr10]} />
+                        <Text style={[Styles.textDefault]}>Jenis Kelamin</Text>
+                     </View>
+                     <Text style={[Styles.textDefaultSemiBold]}>Perempuan</Text>
+                  </View>
+
+               </View>
+            </View>
+         </ScrollView>
+      </SafeAreaView>
    )
 }

components/alertKonfirmasi.ts

@@ -0,0 +1,21 @@
+import { Alert } from "react-native";
+
+
+type Props = {
+   title: string,
+   desc: string
+   onPress: () => void
+}
+
+export default function AlertKonfirmasi({ title, desc, onPress }: Props) {
+   Alert.alert(title, desc, [
+      {
+         text: 'Tidak',
+         style: 'cancel',
+      },
+      {
+         text: 'Ya',
+         onPress: () => { onPress() }
+      },
+   ]);
+}

components/buttonMenuHeader.tsx

@@ -0,0 +1,17 @@
+import { Feather } from "@expo/vector-icons"
+import { ButtonHeader } from "./buttonHeader"
+
+type Props = {
+   onPress?: () => void
+}
+
+export default function ButtonMenuHeader({ onPress }: Props) {
+   return (
+      <>
+         <ButtonHeader
+            item={<Feather name="menu" size={20} color="white" />}
+            onPress={onPress}
+         />
+      </>
+   )
+}

components/home/headerRightHome.tsx

@@ -8,8 +8,8 @@ export function HeaderRightHome() {
    return (
       <View style={[Styles.rowSpaceBetween, { width: 140 }]}>
          <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="bell" size={20} color="white" />} onPress={() => { router.push('/notification') }} />
-         <ButtonHeader item={<Feather name="user" size={20} color="white" />} onPress={() => { router.push('/') }} />
+         <ButtonHeader item={<Feather name="user" size={20} color="white" />} onPress={() => { router.push('/profile') }} />
       </View>
    )
 }

constants/Styles.ts

@@ -68,7 +68,7 @@ const Styles = StyleSheet.create({
    mb30: {
       marginBottom: 30
    },
-   mb100:{
+   mb100: {
       marginBottom: 100
    },
    mv05: {
@@ -83,6 +83,9 @@ const Styles = StyleSheet.create({
    mt05: {
       marginTop: 5
    },
+   mt10: {
+      marginTop: 10
+   },
    mr05: {
       marginRight: 5
    },
@@ -253,9 +256,21 @@ const Styles = StyleSheet.create({
       height: 48,
       borderRadius: 100
    },
+   userProfileBig: {
+      width: 100,
+      height: 100,
+      borderRadius: 100
+   },
    iconContent: {
       padding: 10,
       borderRadius: 100,
+   },
+   wrapHeadViewMember: {
+      backgroundColor: '#19345E',
+      paddingVertical: 30,
+      alignItems: 'center',
+      borderBottomLeftRadius: 25,
+      borderBottomRightRadius: 25
    }
 })