144 lines
3.4 KiB
TypeScript
144 lines
3.4 KiB
TypeScript
import { useFocusEffect } from '@react-navigation/native';
|
|
import React from 'react';
|
|
import { Pressable, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
|
|
|
|
import { useApp } from '@/src/app-context';
|
|
|
|
export default function SettingsScreen() {
|
|
const { state, actions } = useApp();
|
|
|
|
useFocusEffect(
|
|
React.useCallback(() => {
|
|
actions.setPage('settings');
|
|
return undefined;
|
|
}, [actions]),
|
|
);
|
|
|
|
const profileName = state.session?.user?.name || 'User';
|
|
const profileEmail = state.session?.user?.email || 'user@example.com';
|
|
const profileInitial = (profileName[0] || 'U').toUpperCase();
|
|
|
|
return (
|
|
<SafeAreaView style={styles.safe}>
|
|
<ScrollView contentContainerStyle={styles.content}>
|
|
<Text style={styles.title}>Settings</Text>
|
|
|
|
<View style={styles.profileCard}>
|
|
<View style={styles.avatar}>
|
|
<Text style={styles.avatarText}>{profileInitial}</Text>
|
|
</View>
|
|
<View>
|
|
<Text style={styles.profileName}>{profileName}</Text>
|
|
<Text style={styles.profileEmail}>{profileEmail}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.menuCard}>
|
|
<Pressable style={styles.menuItem} onPress={actions.runDiagnostics}>
|
|
<Text style={styles.menuTitle}>Run Diagnostics</Text>
|
|
<Text style={styles.menuArrow}>{'>'}</Text>
|
|
</Pressable>
|
|
<View style={styles.divider} />
|
|
<View style={styles.menuItem}>
|
|
<Text style={styles.menuTitle}>Device Information</Text>
|
|
<Text style={styles.menuArrow}>{'>'}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<Pressable style={styles.signOutButton} onPress={() => void actions.signOut()}>
|
|
<Text style={styles.signOutText}>Sign Out</Text>
|
|
</Pressable>
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
safe: {
|
|
flex: 1,
|
|
backgroundColor: '#0a0a0c',
|
|
},
|
|
content: {
|
|
padding: 14,
|
|
gap: 14,
|
|
},
|
|
title: {
|
|
color: '#f9fafb',
|
|
fontSize: 22,
|
|
fontWeight: '700',
|
|
},
|
|
profileCard: {
|
|
borderRadius: 16,
|
|
padding: 14,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(255,255,255,0.08)',
|
|
backgroundColor: '#111218',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 12,
|
|
},
|
|
avatar: {
|
|
width: 56,
|
|
height: 56,
|
|
borderRadius: 28,
|
|
backgroundColor: '#1d4ed8',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
avatarText: {
|
|
color: '#f9fafb',
|
|
fontSize: 24,
|
|
fontWeight: '700',
|
|
},
|
|
profileName: {
|
|
color: '#f3f4f6',
|
|
fontSize: 17,
|
|
fontWeight: '600',
|
|
},
|
|
profileEmail: {
|
|
color: '#9ca3af',
|
|
marginTop: 3,
|
|
fontSize: 13,
|
|
},
|
|
menuCard: {
|
|
borderRadius: 16,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(255,255,255,0.08)',
|
|
backgroundColor: '#111218',
|
|
overflow: 'hidden',
|
|
},
|
|
menuItem: {
|
|
minHeight: 52,
|
|
paddingHorizontal: 14,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
menuTitle: {
|
|
color: '#e5e7eb',
|
|
fontSize: 14,
|
|
fontWeight: '500',
|
|
},
|
|
menuArrow: {
|
|
color: '#6b7280',
|
|
fontSize: 14,
|
|
},
|
|
divider: {
|
|
height: 1,
|
|
backgroundColor: 'rgba(255,255,255,0.08)',
|
|
},
|
|
signOutButton: {
|
|
height: 48,
|
|
borderRadius: 12,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(248,113,113,0.5)',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
signOutText: {
|
|
color: '#fca5a5',
|
|
fontWeight: '700',
|
|
fontSize: 14,
|
|
},
|
|
});
|