frontend: draft actions page
Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago
e4e2bfde523f10abf30a7a1fc1f18f5a49f0ef6b Browse filesParents
40e7d68Changed files
1
Additions
+91
Deletions
-5
frontend/app/(tabs)/actions.tsx
1 +
import { View, Text, StyleSheet } from 'react-native';
1 2
import { ThemedText } from '@/components/misc/themed-text';
2 3
import { ThemedView } from '@/components/misc/themed-view';
3 4
import { ScreenLayout } from '@/components/ui/ScreenLayout';
4 5
import { useAuth } from '@/context/AuthContext';
6 +
import { Section, SectionHeader } from '@/components/ui/Sections';
7 +
import { Card } from '@/components/ui/Cards';
8 +
import { Grid, Col, Row, Between } from '@/components/ui/LayoutHelpers';
9 +
import { Button } from '@/components/ui/Button'
10 +
import { Shadows, Colors, Typography, Spacing, BorderRadius } from '@/constants/theme';
11 +
import { Ionicons } from '@expo/vector-icons';
5 12
6 13
export default function Actions() {
7 14
const { user } = useAuth();
8 15
9 16
return (
10 17
<ScreenLayout userName={user.firstName} userAvatar={user.avatarURL}
11 18
onNotificationPress={() => console.log('Notifications')}
12 19
showNotificationBadge={true}>
13 -
<ThemedView>
14 -
<ThemedText>
15 -
Novo
16 -
</ThemedText>
17 -
</ThemedView>
20 +
<Section>
21 +
<SectionHeader
22 +
title="Hub de Ações e Gestão"
23 +
subtitle="Sua ferramenta de apoio para menter a rotina de saúde organizada e monitorada"
24 +
>
25 +
</SectionHeader>
26 +
27 +
<Button title="Registrar Intervenção" size="large" style={{
28 +
...Shadows.lg
29 +
}} />
30 +
</Section>
31 +
32 +
<Card style={{ padding: Spacing.cardGap, height: 150 }}>
33 +
<View style={[styles.cardIcon, { backgroundColor: '#E7FDEF' }]}>
34 +
<Ionicons name="bandage-outline" size={20} color="#13EC5B" />
35 +
</View>
36 +
37 +
<Text style={styles.cardTitleHeadline}>
38 +
Gerenciar Medicamentos
39 +
</Text>
40 +
41 +
<Text style={styles.cardDescriptionHeadline}>
42 +
Controle horários, doses e estoque de suas prescrições.
43 +
</Text>
44 +
</Card>
45 +
46 +
<Grid gap={4}>
47 +
<Card style={{ padding: Spacing.cardGap }}>
48 +
<View style={[styles.cardIcon, { backgroundColor: '#EFF6FF' }]}>
49 +
<Ionicons name="moon-outline" size={20} color="#2563EB" />
50 +
</View>
51 +
52 +
<Text style={styles.cardTitle}>
53 +
Registrar Sono
54 +
</Text>
55 +
56 +
<Text style={styles.cardDescription}>
57 +
Informe duração e qualidade do sono.
58 +
</Text>
59 +
</Card>
60 +
61 +
<Card style={{ padding: Spacing.cardGap }}>
62 +
<View style={[styles.cardIcon, { backgroundColor: '#FFF7ED' }]}>
63 +
<Ionicons name="flash-outline" size={20} color="#EA580C" />
64 +
</View>
65 +
66 +
<Text style={styles.cardTitle}>
67 +
Adicionar Gatilho
68 +
</Text>
69 +
70 +
<Text style={styles.cardDescription}>
71 +
Registre eventos que aferatam seu humor.
72 +
</Text>
73 +
</Card>
74 +
</Grid>
18 75
</ScreenLayout>
19 76
)
20 77
}
78 +
79 +
const styles = StyleSheet.create({
80 +
cardIcon: {
81 +
paddingVertical: 15,
82 +
paddingHorizontal: 14,
83 +
width: 48,
84 +
borderRadius: BorderRadius.md,
85 +
},
86 +
cardTitleHeadline: {
87 +
...Typography.headlineMd,
88 +
lineHeight: 20,
89 +
marginTop: 4
90 +
},
91 +
cardTitle: {
92 +
...Typography.bodyLg,
93 +
lineHeight: 20,
94 +
marginTop: 4
95 +
},
96 +
cardDescriptionHeadline: {
97 +
...Typography.bodyMg,
98 +
color: Colors.light.textSecondary,
99 +
marginTop: 4
100 +
},
101 +
cardDescription: {
102 +
...Typography.labelSm,
103 +
color: Colors.light.textSecondary,
104 +
marginTop: 4
105 +
}
106 +
})