7c8695cacf
- Update package.json to Expo ~54.0.35, expo-router ~6.0.24, RN 0.81.5 - Remove NativeWind/Tailwind dependencies - Fix babel.config.js: presets babel-preset-expo only - Rewrite all screens with StyleSheet.create (no className) - Add lucide-react-native + react-native-svg - Export design tokens C from _layout.tsx for shared usage - Install node_modules (702 packages) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
85 lines
3.7 KiB
TypeScript
85 lines
3.7 KiB
TypeScript
import { View, Text, TouchableOpacity, ScrollView, Alert, StyleSheet } from 'react-native'
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
|
import { LogOut, CreditCard, Globe } from 'lucide-react-native'
|
|
import { useAuthStore } from '@/lib/store'
|
|
import { C } from '../_layout'
|
|
|
|
const TIER_LABELS: Record<string, string> = {
|
|
FREE: 'Gratuit',
|
|
BASIC: 'Basic',
|
|
PRO: 'Pro',
|
|
BUSINESS: 'Business',
|
|
ENTERPRISE: 'Enterprise',
|
|
}
|
|
|
|
export default function ProfileScreen() {
|
|
const { user, logout } = useAuthStore()
|
|
const initial = (user?.name?.[0] ?? user?.email?.[0] ?? '?').toUpperCase()
|
|
|
|
const handleLogout = () => {
|
|
Alert.alert(
|
|
'Se déconnecter',
|
|
'Voulez-vous vraiment vous déconnecter ?',
|
|
[
|
|
{ text: 'Annuler', style: 'cancel' },
|
|
{ text: 'Déconnecter', style: 'destructive', onPress: logout },
|
|
]
|
|
)
|
|
}
|
|
|
|
return (
|
|
<SafeAreaView style={s.safe}>
|
|
<ScrollView style={{ flex: 1, paddingHorizontal: 20 }}>
|
|
<Text style={s.title}>Profil</Text>
|
|
|
|
<View style={s.card}>
|
|
<View style={s.avatar}>
|
|
<Text style={s.avatarText}>{initial}</Text>
|
|
</View>
|
|
<Text style={s.name}>{user?.name ?? 'Utilisateur'}</Text>
|
|
<Text style={s.email}>{user?.email}</Text>
|
|
{user?.tier && (
|
|
<View style={s.badge}>
|
|
<Text style={s.badgeText}>{TIER_LABELS[user.tier] ?? user.tier}</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
<View style={s.actionsCard}>
|
|
<TouchableOpacity style={[s.actionRow, s.actionRowBorder]}>
|
|
<CreditCard size={18} color={C.concrete} />
|
|
<Text style={s.actionText}>Abonnement</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={s.actionRow}>
|
|
<Globe size={18} color={C.concrete} />
|
|
<Text style={s.actionText}>Ouvrir memento-note.com</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<TouchableOpacity onPress={handleLogout} style={s.logoutBtn}>
|
|
<LogOut size={18} color={C.rose} />
|
|
<Text style={s.logoutText}>Se déconnecter</Text>
|
|
</TouchableOpacity>
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
const s = StyleSheet.create({
|
|
safe: { flex: 1, backgroundColor: C.paper },
|
|
title: { fontSize: 22, fontStyle: 'italic', fontWeight: '700', color: C.ink, paddingTop: 16, paddingBottom: 24 },
|
|
card: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 20, padding: 20, marginBottom: 16 },
|
|
avatar: { width: 56, height: 56, borderRadius: 28, backgroundColor: '#f3ece4', alignItems: 'center', justifyContent: 'center', marginBottom: 12 },
|
|
avatarText: { fontSize: 22, fontWeight: '700', color: C.brand },
|
|
name: { fontSize: 17, fontWeight: '600', color: C.ink },
|
|
email: { fontSize: 13, color: C.concrete, marginTop: 2 },
|
|
badge: { marginTop: 12, alignSelf: 'flex-start', backgroundColor: '#f3ece4', paddingHorizontal: 12, paddingVertical: 4, borderRadius: 20 },
|
|
badgeText: { fontSize: 11, fontWeight: '800', color: C.brand, letterSpacing: 1, textTransform: 'uppercase' },
|
|
actionsCard: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 20, overflow: 'hidden', marginBottom: 16 },
|
|
actionRow: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 14 },
|
|
actionRowBorder: { borderBottomWidth: 1, borderBottomColor: C.border },
|
|
actionText: { fontSize: 15, color: C.ink, flex: 1 },
|
|
logoutBtn: { backgroundColor: C.white, borderWidth: 1, borderColor: C.roseBorder, borderRadius: 20, flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 14 },
|
|
logoutText: { fontSize: 15, color: C.rose, fontWeight: '500' },
|
|
})
|