frontend: draft actions page
Parents:
40e7d681 file(s) changed
- frontend/app/(tabs)/actions.tsx +91 -5
frontend/app/(tabs)/actions.tsx
@@ -1,7 +1,14 @@
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();
@@ -10,11 +17,90 @@ 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 + })