frontend: rig up a dummy settings page
Parents:
33435d33 file(s) changed
- frontend/app/(tabs)/settings.tsx +37 -6
- frontend/app/profile.tsx +158 -0
- frontend/public/tamagui.generated.css +0 -0
frontend/app/(tabs)/settings.tsx
@@ -1,19 +1,37 @@
1 - import { StyleSheet } from 'react-native';
1 + import { TouchableOpacity, StyleSheet, FlatList, View } from 'react-native';
2 + import { useState } from 'react';
2 3 import ParallaxScrollView from '@/components/misc/parallax-scroll-view';
4 + import { Link } from 'expo-router'
3 5
4 6 import { ThemedText } from '@/components/misc/themed-text';
5 7 import { ThemedView } from '@/components/misc/themed-view';
6 8 import { IconSymbol } from '@/components/ui/icon-symbol';
7 9 import { Fonts } from '@/constants/theme';
10 + import { useThemeColor } from '@/hooks/use-theme-color';
8 11
9 12 export default function Settings() {
13 + const [options] = useState([
14 + { id: 'profile', name: 'Perfil', path: '/profile'}
15 + ])
16 +
17 + const textColor = useThemeColor({}, 'text');
18 + const tintColor = useThemeColor({}, 'tint');
19 +
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 + )
27 +
10 28 return (
11 29 <ParallaxScrollView
12 30 headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
13 31 headerImage={
14 32 <IconSymbol
15 33 size={310}
16 - color="#808080"
34 + color="pink"
17 35 name="chevron.left.forwardslash.chevron.right"
18 36 style={styles.headerImage}
19 37 />
@@ -24,12 +42,13 @@ type="title"
24 42 style={{
25 43 fontFamily: Fonts.rounded,
26 44 }}>
27 - Explore
45 + Configurações
28 46 </ThemedText>
29 47 </ThemedView>
30 - <ThemedText>
31 - This app includes example code to help you get started.
32 - </ThemedText>
48 +
49 + {(options.map((opt) => (
50 + renderItem({ item: opt })
51 + )))}
33 52 </ParallaxScrollView>
34 53 )
35 54 }
@@ -41,6 +60,18 @@ color: '#808080',
41 60 bottom: -90,
42 61 left: -35,
43 62 position: 'absolute',
63 + },
64 + item: {
65 + paddingTop: 16,
66 + paddingBottom: 16,
67 + },
68 + itemName: {
69 + fontSize: 16,
70 + fontWeight: 'bold',
71 + },
72 + separator: {
73 + height: 1,
74 + backgroundColor: '#ccc'
44 75 },
45 76 titleContainer: {
46 77 flexDirection: 'row',
frontend/app/profile.tsx
@@ -0,0 +1,158 @@
1 + import { useState, useEffect } from 'react';
2 + import {
3 + ThemedView
4 + } from '@/components/ui/themed-view'
5 +
6 + import {
7 + ThemedText
8 + } from '@/components/ui/themed-text'
9 +
10 + import {
11 + View,
12 + Text,
13 + StyleSheet,
14 + ScrollView,
15 + KeyboardAvoidingView,
16 + Platform,
17 + Alert,
18 + } from 'react-native';
19 + import { Link, useLocalSearchParams, router } from 'expo-router';
20 + import { SafeAreaView } from 'react-native-safe-area-context';
21 + import { useThemeColor } from '@/hooks/use-theme-color';
22 + import { Button, Input } from '@/components/ui';
23 +
24 + export default function Profile() {
25 + const [firstName, setFirstName] = useState();
26 + const [lastName, setLastName] = useState();
27 + const [password, setPassword] = useState();
28 + const [confirmPassword, setConfirmPassword] = useState();
29 + const [email, setEmail] = useState();
30 + const [loading, setLoading] = useState(false);
31 + const [errors, setErrors] = useState<{
32 + password?: string;
33 + confirmPassword?: string;
34 + }>({});
35 +
36 + const backgroundColor = useThemeColor({}, 'background');
37 + const textColor = useThemeColor({}, 'text');
38 +
39 + const handleUpdate = () => {}
40 +
41 + return (
42 + <SafeAreaView style={[styles.container, { backgroundColor }]}>
43 + <KeyboardAvoidingView
44 + behavior='height'
45 + style={styles.keyboardView}
46 + >
47 + <ScrollView
48 + contentContainerStyle={styles.scrollContainer}
49 + showsVerticalScrollIndicator={false}
50 + >
51 + <View style={styles.header}>
52 + <Text style={[styles.title, { color: textColor }]}>Edite o seu perfil</Text>
53 + <Text style={[styles.subtitle, { color: textColor, opacity: 0.7 }]}>
54 + Altere suas configurações
55 + </Text>
56 + </View>
57 +
58 + <View style={styles.form}>
59 + <Input
60 + label="Primeiro Nome"
61 + type="text"
62 + value={firstName}
63 + onChangeText={setFirstName}
64 + placeholder="Qual seu nome?"
65 + error={errors.firstName}
66 + />
67 +
68 + <Input
69 + label="Sobrenome"
70 + type="text"
71 + value={lastName}
72 + onChangeText={setLastName}
73 + placeholder="Qual seu sobrenome?"
74 + error={errors.lastName}
75 + />
76 +
77 + <Input
78 + label="Nova senha"
79 + type="password"
80 + value={password}
81 + onChangeText={setPassword}
82 + placeholder="Digite uma nova senha"
83 + error={errors.password}
84 + showPasswordToggle
85 + />
86 +
87 + <Input
88 + label="Confirmar nova senha"
89 + type="password"
90 + value={confirmPassword}
91 + onChangeText={setConfirmPassword}
92 + placeholder="Confirme a nova senha"
93 + error={errors.confirmPassword}
94 + showPasswordToggle
95 + />
96 +
97 + <Button
98 + title="Trocar senha"
99 + onPress={handleUpdate}
100 + loading={loading}
101 + style={styles.resetButton}
102 + />
103 + </View>
104 +
105 + </ScrollView>
106 + </KeyboardAvoidingView>
107 + </SafeAreaView>
108 + )
109 + }
110 +
111 + const styles = StyleSheet.create({
112 + container: {
113 + flex: 1,
114 + },
115 + keyboardView: {
116 + flex: 1,
117 + },
118 + scrollContainer: {
119 + flexGrow: 1,
120 + paddingHorizontal: 24,
121 + justifyContent: 'start',
122 + minHeight: '100%',
123 + },
124 + header: {
125 + alignItems: 'left',
126 + marginBottom: 40,
127 + },
128 + title: {
129 + fontSize: 28,
130 + fontWeight: 'bold',
131 + marginBottom: 8,
132 + },
133 + subtitle: {
134 + fontSize: 16,
135 + textAlign: 'left',
136 + },
137 + form: {
138 + marginBottom: 32,
139 + },
140 + resetButton: {
141 + marginTop: 8,
142 + },
143 + link: {
144 + textAlign: 'center',
145 + fontSize: 14,
146 + fontWeight: '500',
147 + },
148 + footer: {
149 + flexDirection: 'row',
150 + justifyContent: 'center',
151 + alignItems: 'center',
152 + marginTop: 'auto',
153 + paddingBottom: 20,
154 + },
155 + footerText: {
156 + fontSize: 14,
157 + },
158 + });
frontend/public/tamagui.generated.css
Binary file brotha