90 lines
2.2 KiB
TypeScript
90 lines
2.2 KiB
TypeScript
import { StyleSheet, TouchableOpacity } from 'react-native';
|
|
import { useRouter } from 'expo-router';
|
|
import ParallaxScrollView from '@/components/default/ParallaxScrollView';
|
|
import { ThemedText, ThemedTextButton, ThemedView } from '@/components/theme';
|
|
import { IconSymbol } from '@/components/ui/IconSymbol';
|
|
|
|
const SettingsScreen = () => {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<ParallaxScrollView
|
|
headerImage={
|
|
<IconSymbol size={80} color='#808080' name='gear.circle' style={styles.headerImage} />
|
|
}
|
|
headerTitle={
|
|
<ThemedText type='title' style={styles.headerTitle}>
|
|
Settings
|
|
</ThemedText>
|
|
}
|
|
>
|
|
<ThemedView style={styles.section}>
|
|
<TouchableOpacity
|
|
style={styles.settingItem}
|
|
onPress={() => router.push('/settings/profile')}
|
|
>
|
|
<IconSymbol name="person.fill" size={24} color="#007AFF" style={styles.icon} />
|
|
<ThemedView style={styles.settingContent}>
|
|
<ThemedText style={styles.settingTitle}>Profile</ThemedText>
|
|
<ThemedText style={styles.settingSubtitle}>Name, photo, email</ThemedText>
|
|
</ThemedView>
|
|
<IconSymbol name="chevron.right" size={20} color="#C7C7CC" />
|
|
</TouchableOpacity>
|
|
|
|
</ThemedView>
|
|
|
|
<ThemedView style={styles.section}>
|
|
</ThemedView>
|
|
</ParallaxScrollView>
|
|
);
|
|
};
|
|
|
|
export default SettingsScreen;
|
|
|
|
const styles = StyleSheet.create({
|
|
headerImage: {
|
|
color: '#808080',
|
|
bottom: 6,
|
|
left: 38,
|
|
position: 'absolute',
|
|
},
|
|
headerTitle: {
|
|
position: 'absolute',
|
|
bottom: 20,
|
|
left: 16,
|
|
right: 0,
|
|
textAlign: 'center',
|
|
fontSize: 48,
|
|
lineHeight: 64,
|
|
fontWeight: 'bold',
|
|
},
|
|
section: {
|
|
marginVertical: 16,
|
|
borderRadius: 10,
|
|
overflow: 'hidden',
|
|
},
|
|
settingItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
padding: 16,
|
|
backgroundColor: 'rgba(200, 200, 200, 0.1)',
|
|
marginBottom: 1,
|
|
},
|
|
icon: {
|
|
marginRight: 16,
|
|
},
|
|
settingContent: {
|
|
backgroundColor: 'transparent',
|
|
flex: 1,
|
|
},
|
|
settingTitle: {
|
|
fontSize: 17,
|
|
fontWeight: '500',
|
|
},
|
|
settingSubtitle: {
|
|
fontSize: 14,
|
|
opacity: 0.6,
|
|
marginTop: 4,
|
|
},
|
|
});
|