frontend: use section list for the settings page
Parents:
474ef7d1 file(s) changed
- frontend/app/(tabs)/settings.tsx +75 -51
frontend/app/(tabs)/settings.tsx
@@ -1,4 +1,5 @@
1 - import { TouchableOpacity, StyleSheet, FlatList, View } from 'react-native';
1 + import { TouchableOpacity, StyleSheet, Text, SectionList, View, StatusBar, Pressable } from 'react-native';
2 + import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
2 3 import { useState } from 'react';
3 4 import ParallaxScrollView from '@/components/misc/parallax-scroll-view';
4 5 import { Link } from 'expo-router'
@@ -9,6 +10,34 @@ import { IconSymbol } from '@/components/ui/icon-symbol';
9 10 import { Fonts } from '@/constants/theme';
10 11 import { useThemeColor } from '@/hooks/use-theme-color';
11 12
13 + const SECTIONS = [
14 + {
15 + title: 'Geral',
16 + data: [{
17 + title: 'Perfil & Senha',
18 + path: '/profile'
19 + }]
20 + },
21 + {
22 + title: 'Sobre',
23 + data: [
24 + {
25 + title: 'Sobre o aplicativo',
26 + path: '/about'
27 + },
28 + {
29 + title: 'O que acontece com seus dados?',
30 + path: '/data'
31 + },
32 + {
33 + title: 'Sair',
34 + path: '/logout',
35 + logout: true
36 + }
37 + ]
38 + }
39 + ]
40 +
12 41 export default function Settings() {
13 42 const [options] = useState([
14 43 { id: 'profile', name: 'Perfil', path: '/profile'}
@@ -17,64 +46,59 @@
17 46 const textColor = useThemeColor({}, 'text');
18 47 const tintColor = useThemeColor({}, 'tint');
19 48
20 - const renderItem = ({item}) => (
21 - <Link key={item.id} href={item.path} asChild style={[styles.item, { color: tintColor }]}>
22 - <ThemedText>
23 - {item.name}
24 - </ThemedText>
25 - </Link>
26 - )
49 + console.log(tintColor, textColor)
27 50
28 - return (
29 - <ParallaxScrollView
30 - headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
31 - headerImage={
32 - <IconSymbol
33 - size={310}
34 - color="pink"
35 - name="chevron.left.forwardslash.chevron.right"
36 - style={styles.headerImage}
37 - />
38 - }>
39 - <ThemedView style={styles.titleContainer}>
40 - <ThemedText
41 - type="title"
42 - style={{
43 - fontFamily: Fonts.rounded,
44 - }}>
45 - Configurações
46 - </ThemedText>
47 - </ThemedView>
51 + const renderItem = ({item}) => {
52 + const itemStyle = [
53 + styles.item,
54 + ]
48 55
49 - {(options.map((opt) => (
50 - renderItem({ item: opt })
51 - )))}
52 - </ParallaxScrollView>
56 + const itemColor = { color: item.logout ? '#FF2C2C' : textColor }
57 +
58 + return (
59 + <View>
60 + <Link key={item.id} href={item.path} asChild style={itemStyle}>
61 + <Pressable>
62 + <Text style={itemColor}>
63 + {item.title}
64 + </Text>
65 + </Pressable>
66 + </Link>
67 + </View>
68 + )
69 + }
70 +
71 + return (
72 + <SafeAreaProvider>
73 + <SafeAreaView style={styles.container} edges={['top']}>
74 + <StatusBar style='dark' />
75 + <SectionList
76 + sections={SECTIONS}
77 + keyExtractor={(item, index) => item.title + index}
78 + renderItem={renderItem}
79 + renderSectionHeader={({section: {title}}) => (
80 + <ThemedText style={styles.header}>{title}</ThemedText>
81 + )} />
82 + </SafeAreaView>
83 + </SafeAreaProvider>
53 84 )
54 85 }
55 86
56 -
57 87 const styles = StyleSheet.create({
58 - headerImage: {
59 - color: '#808080',
60 - bottom: -90,
61 - left: -35,
62 - position: 'absolute',
88 + container: {
89 + flex: 1,
90 + paddingTop: StatusBar.currentHeight,
91 + marginHorizontal: 16
63 92 },
64 93 item: {
65 - paddingTop: 16,
66 - paddingBottom: 16,
94 + paddingTop: 20,
95 + paddingBottom: 20,
67 96 },
68 - itemName: {
69 - fontSize: 16,
70 - fontWeight: 'bold',
97 + header: {
98 + fontSize: 22,
99 + fontWeight: 'bold'
71 100 },
72 - separator: {
73 - height: 1,
74 - backgroundColor: '#ccc'
75 - },
76 - titleContainer: {
77 - flexDirection: 'row',
78 - gap: 8,
79 - },
101 + logout: {
102 + textColor: '#FF2C2C'
103 + }
80 104 });