frontend: rig up a dummy settings page
Pedro Lucas Porcellis porcellis@eletrotupi.com · 6 months ago
dbfa14d8cd946eddc22e3da3c978baa059f51816 Browse filesParents
33435d3Changed files
3
Additions
+195
Deletions
-6
frontend/app/(tabs)/settings.tsx
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
/>
20 38
}>
21 39
<ThemedView style={styles.titleContainer}>
22 40
<ThemedText
23 41
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
}
36 55
37 56
39 58
headerImage: {
40 59
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',
47 78
gap: 8,
48 79
},
49 80
});
/dev/null → frontend/app/profile.tsx
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 +
});
/dev/null → frontend/public/tamagui.generated.css
Binary file