frontend: lay general layout for the new entry
Parents:
85d0e311 file(s) changed
- frontend/app/(tabs)/new/entry.tsx +56 -8
frontend/app/(tabs)/new/entry.tsx
@@ -6,7 +6,8 @@
6 6 import {
7 7 View,
8 8 Text,
9 - StyleSheet
9 + StyleSheet,
10 + ScrollView
10 11 } from 'react-native';
11 12
12 13 import { SafeAreaView } from 'react-native-safe-area-context';
@@ -14,10 +15,12 @@ import { ThemedText } from '@/components/misc/themed-text';
14 15 import { ThemedView } from '@/components/misc/themed-view';
15 16 import { ScreenLayout } from '@/components/ui/ScreenLayout';
16 17 import { useAuth } from '@/context/AuthContext';
17 - import { Grid, Col, Row, Between } from '@/components/ui/LayoutHelpers';
18 + import { Grid, Col, Row, Between, Center } from '@/components/ui/LayoutHelpers';
18 19 import { Card } from '@/components/ui/Cards';
19 20 import { Button } from '@/components/ui/Button';
21 + import { Input } from '@/components/ui/Input';
20 22 import { Section, SectionHeader } from '@/components/ui/Sections';
23 + import { Spacing, Typography, Colors } from '@/constants/theme';
21 24
22 25 export default function NewMoodEntry() {
23 26 const { user } = useAuth();
@@ -25,16 +28,61 @@ // TODO: transform this into a specific mood component
25 28 const { initialMood } = useLocalSearchParams();
26 29
27 30 return (
28 - <SafeAreaView style={styles.container}>
29 - <ThemedText>
30 - Little black sub {initialMood}
31 - </ThemedText>
32 - </SafeAreaView>
31 + <View>
32 + <ScrollView
33 + scrollEventThrottle={16}>
34 + <View style={styles.container}>
35 + <Center>
36 + <ThemedText style={styles.statusPrefix}>
37 + Como você está se sentindo agora?
38 + </ThemedText>
39 +
40 + <ThemedText style={styles.statusText}>
41 + Muito Bem
42 + </ThemedText>
43 + </Center>
44 +
45 + <Card style={styles.resumeCard}>
46 + </Card>
47 +
48 + <Card style={styles.annotationsCard}>
49 + <Input
50 + label="Notas sobre o dia"
51 + type="text"
52 + onChangeText={(val) => console.log(val)}
53 + placeholder="Escreva uma nota rápida sobre o seu dia..."
54 + />
55 + </Card>
56 +
57 + <Section>
58 + <SectionHeader title="Componentes do Humor" info="Editar" />
59 + <Grid gap={4}>
60 + <Card style={{height: 38}} />
61 + <Card style={{height: 38}} />
62 + </Grid>
63 + </Section>
64 + </View>
65 + </ScrollView>
66 + </View>
33 67 );
34 68 }
35 69
36 70 const styles = StyleSheet.create({
37 71 container: {
38 - backgroundColor: 'pink'
72 + gap: 24,
73 + paddingHorizontal: Spacing.containerPadding,
74 + paddingVertical: Spacing.sectionGap,
75 + },
76 + statusText: {
77 + ...Typography.headlineXg,
78 + },
79 + statusPrefix: {
80 + ...Typography.bodyMd
81 + },
82 + annotationsCard: {
83 + padding: Spacing.cardGap
84 + },
85 + resumeCard: {
86 + height: 361
39 87 }
40 88 });