wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd: profile

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

No Issues
This commit is contained in:
amel
2025-02-27 12:02:57 +08:00
parent 3372d4df23
commit f7b8c08f20
5 changed files with 149 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
app/(application)/profile.tsx
View File

@@ -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>
<Text>Profile</Text>
</View>
<SafeAreaView>
<Stack.Screen
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>
)
}

21
components/alertKonfirmasi.ts Normal file
View File

@@ -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() }
},
]);
}

17
components/buttonMenuHeader.tsx Normal file
View File

@@ -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}
/>
</>
)
}

4
components/home/headerRightHome.tsx
View File

@@ -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="user" 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('/profile') }} />
</View>
)
}

17
constants/Styles.ts
View File

@@ -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
}
})