eletrotupi / tcc/ commit / 8b59f81

frontend: lay general layout for the new entry

Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago 8b59f8151ab8c986db903c1f9f856d47149e6204 Browse files
Parents 85d0e31
Changed files
1
Additions
+56
Deletions
-8
frontend/app/(tabs)/new/entry.tsx modified+56 -8
frontend/app/(tabs)/new/entry.tsx
1 1 
import { useState, useEffect } from 'react';
2 2 
import {
3 3 
  Link, router, useLocalSearchParams
4 4 
} from 'expo-router';
5 5
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';
13 14 
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();
24 27 
  // 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 
});