96 lines
3.1 KiB
TypeScript
96 lines
3.1 KiB
TypeScript
import { StyleSheet, TouchableOpacity } from 'react-native';
|
|
|
|
import { ThemedText } from '@/components/themed-text';
|
|
import { ThemedView } from '@/components/themed-view';
|
|
import { IconSymbol } from '@/components/ui/icon-symbol';
|
|
import { Colors } from '@/constants/theme';
|
|
import { useTheme } from '@/context/ThemeContext';
|
|
import { useColorScheme } from '@/hooks/use-color-scheme';
|
|
|
|
export default function SettingsScreen() {
|
|
const colorScheme = useColorScheme();
|
|
const { themeMode, setThemeMode } = useTheme();
|
|
const theme = colorScheme ?? 'light';
|
|
|
|
const cardStyle = [
|
|
styles.card,
|
|
{
|
|
shadowColor: Colors[theme].border,
|
|
borderColor: Colors[theme].border
|
|
}
|
|
];
|
|
|
|
return (
|
|
<ThemedView style={styles.container}>
|
|
<ThemedView style={styles.header}>
|
|
<ThemedText type="title">Settings</ThemedText>
|
|
<ThemedText type="secondary">App preferences</ThemedText>
|
|
</ThemedView>
|
|
|
|
<ThemedView style={styles.sectionHeader}>
|
|
<ThemedText type="subtitle">Appearance</ThemedText>
|
|
</ThemedView>
|
|
<ThemedView style={cardStyle} variant="card">
|
|
<TouchableOpacity
|
|
style={styles.item}
|
|
onPress={() => setThemeMode('light')}
|
|
>
|
|
<ThemedText>Light Mode</ThemedText>
|
|
{themeMode === 'light' && <IconSymbol name="checkmark" size={20} color={Colors[theme].tint} />}
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.item}
|
|
onPress={() => setThemeMode('dark')}
|
|
>
|
|
<ThemedText>Dark Mode</ThemedText>
|
|
{themeMode === 'dark' && <IconSymbol name="checkmark" size={20} color={Colors[theme].tint} />}
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.item, styles.lastItem]}
|
|
onPress={() => setThemeMode('system')}
|
|
>
|
|
<ThemedText>System Default</ThemedText>
|
|
{themeMode === 'system' && <IconSymbol name="checkmark" size={20} color={Colors[theme].tint} />}
|
|
</TouchableOpacity>
|
|
</ThemedView>
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
padding: 20,
|
|
paddingTop: 80,
|
|
},
|
|
header: {
|
|
marginBottom: 32,
|
|
},
|
|
sectionHeader: {
|
|
marginBottom: 12,
|
|
marginTop: 24,
|
|
},
|
|
card: {
|
|
borderRadius: 16,
|
|
borderWidth: 1,
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.05,
|
|
shadowRadius: 8,
|
|
elevation: 2,
|
|
overflow: 'hidden',
|
|
},
|
|
item: {
|
|
padding: 16,
|
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
|
borderBottomColor: 'rgba(0,0,0,0.05)',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
lastItem: {
|
|
borderBottomWidth: 0,
|
|
},
|
|
});
|