166 lines
3.8 KiB
TypeScript
166 lines
3.8 KiB
TypeScript
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
|
import { Redirect, router } from 'expo-router';
|
|
import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
|
|
|
|
import { Avatar } from '@/components/common/Avatar';
|
|
import { Catamaran, FunnelSans } from '@/constants/fonts';
|
|
import { Palette } from '@/constants/palette';
|
|
import { Radius, Spacing } from '@/constants/styles';
|
|
import { useAuth } from '@/providers/AuthProvider';
|
|
|
|
function SettingsRow({
|
|
label,
|
|
description,
|
|
onPress,
|
|
}: {
|
|
label: string;
|
|
description: string;
|
|
onPress: () => void;
|
|
}) {
|
|
return (
|
|
<Pressable onPress={onPress} style={styles.row}>
|
|
<View style={styles.rowContent}>
|
|
<Text style={styles.rowLabel}>{label}</Text>
|
|
<Text style={styles.rowDescription}>{description}</Text>
|
|
</View>
|
|
<MaterialCommunityIcons
|
|
color={Palette.gray}
|
|
name="chevron-right"
|
|
size={24}
|
|
/>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
export default function SettingsScreen() {
|
|
const { initializing, user } = useAuth();
|
|
|
|
if (initializing) {
|
|
return (
|
|
<View style={styles.centered}>
|
|
<ActivityIndicator color={Palette.black} />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
if (!user) {
|
|
return <Redirect href="/login" />;
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.header}>
|
|
<Text style={styles.title}>Settings</Text>
|
|
<Text style={styles.subtitle}>Gere ton compte et ton profil.</Text>
|
|
</View>
|
|
|
|
<View style={styles.previewCard}>
|
|
<Avatar
|
|
name={user.username ?? user.email}
|
|
size="md"
|
|
uri={user.profilePicture}
|
|
/>
|
|
|
|
<View style={styles.previewContent}>
|
|
<Text style={styles.previewTitle}>{user.username || 'Profil'}</Text>
|
|
<Text style={styles.previewSubtitle}>{user.email}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>Account</Text>
|
|
<View style={styles.sectionCard}>
|
|
<SettingsRow
|
|
description="Photo, pseudo, email et dates de creation."
|
|
label="Profile"
|
|
onPress={() => router.push('/profile')}
|
|
/>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
centered: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: Palette.cream,
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
paddingHorizontal: Spacing.lg,
|
|
paddingTop: Spacing.xl,
|
|
gap: Spacing.lg,
|
|
backgroundColor: Palette.cream,
|
|
},
|
|
header: {
|
|
gap: Spacing.xs,
|
|
},
|
|
title: {
|
|
...Catamaran.extraBold34,
|
|
color: Palette.black,
|
|
},
|
|
subtitle: {
|
|
...FunnelSans.regular16,
|
|
color: Palette.gray,
|
|
},
|
|
previewCard: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: Spacing.md,
|
|
padding: Spacing.md,
|
|
borderWidth: 1,
|
|
borderColor: Palette.cream,
|
|
borderRadius: Radius.xl,
|
|
backgroundColor: Palette.white,
|
|
},
|
|
previewContent: {
|
|
flex: 1,
|
|
gap: Spacing.xs,
|
|
},
|
|
previewTitle: {
|
|
...FunnelSans.medium16,
|
|
color: Palette.black,
|
|
},
|
|
previewSubtitle: {
|
|
...FunnelSans.medium14,
|
|
color: Palette.gray,
|
|
},
|
|
section: {
|
|
gap: Spacing.sm,
|
|
},
|
|
sectionTitle: {
|
|
...FunnelSans.medium12,
|
|
color: Palette.gray,
|
|
textTransform: 'uppercase',
|
|
},
|
|
sectionCard: {
|
|
borderWidth: 1,
|
|
borderColor: Palette.cream,
|
|
borderRadius: Radius.xl,
|
|
backgroundColor: Palette.white,
|
|
overflow: 'hidden',
|
|
},
|
|
row: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: Spacing.md,
|
|
paddingHorizontal: Spacing.md,
|
|
paddingVertical: Spacing.md,
|
|
},
|
|
rowContent: {
|
|
flex: 1,
|
|
gap: Spacing.xs,
|
|
},
|
|
rowLabel: {
|
|
...FunnelSans.medium16,
|
|
color: Palette.black,
|
|
},
|
|
rowDescription: {
|
|
...FunnelSans.regular16,
|
|
color: Palette.gray,
|
|
},
|
|
});
|