eletrotupi / tcc/ frontend/app/(tabs)/actions.tsx16e98ad4fc123f536ae1c082c199095289a3ee05
4.7 KB | 160 lines Raw
1
import { View, Text, StyleSheet } from 'react-native';
2
import { ThemedText } from '@/components/misc/themed-text';
3
import { ThemedView } from '@/components/misc/themed-view';
4
import { ScreenLayout } from '@/components/ui/ScreenLayout';
5
import { useAuth } from '@/context/AuthContext';
6
import { Section, SectionHeader } from '@/components/ui/Sections';
7
import { Card, SubtleInfoCard } 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, Octicons } from '@expo/vector-icons';
12
import { Link } from 'expo-router';
13
14
export default function Actions() {
15
  const { user } = useAuth();
16
17
  return (
18
    <ScreenLayout userName={user.firstName} userAvatar={user.avatarURL}
19
      onNotificationPress={() => console.log('Notifications')}
20
      showNotificationBadge={true}>
21
      <Section>
22
        <SectionHeader
23
          title="Hub de Ações e Gestão"
24
          subtitle="Sua ferramenta de apoio para menter a rotina de saúde organizada e monitorada"
25
          >
26
        </SectionHeader>
27
28
        <Button title="Registrar Intervenção" size="large" style={{
29
          ...Shadows.lg
30
        }} />
31
      </Section>
32
33
      <Card style={{ padding: Spacing.cardGap, height: 150 }}>
34
        <View style={[styles.cardIcon, { backgroundColor: '#E7FDEF' }]}>
35
          <Ionicons name="bandage-outline" size={20} color="#13EC5B" />
36
        </View>
37
38
        <Text style={styles.cardTitleHeadline}>
39
          Gerenciar Medicamentos
40
        </Text>
41
42
        <Text style={styles.cardDescriptionHeadline}>
43
          Controle horários, doses e estoque de suas prescrições.
44
        </Text>
45
      </Card>
46
47
      <Grid gap={4}>
48
        <Card style={{ padding: Spacing.cardGap }}>
49
          <View style={[styles.cardIcon, { backgroundColor: '#EFF6FF' }]}>
50
            <Ionicons name="moon-outline" size={20} color="#2563EB" />
51
          </View>
52
53
          <Text style={styles.cardTitle}>
54
            Registrar Sono
55
          </Text>
56
57
          <Text style={styles.cardDescription}>
58
            Informe duração e qualidade do sono.
59
          </Text>
60
        </Card>
61
62
        <Card style={{ padding: Spacing.cardGap }}>
63
          <View style={[styles.cardIcon, { backgroundColor: '#FFF7ED' }]}>
64
            <Ionicons name="flash-outline" size={20} color="#EA580C" />
65
          </View>
66
67
          <Text style={styles.cardTitle}>
68
            Adicionar Gatilho
69
          </Text>
70
71
          <Text style={styles.cardDescription}>
72
            Registre eventos que aferatam seu humor.
73
          </Text>
74
        </Card>
75
      </Grid>
76
77
      <Card style={styles.disclaimerCard}>
78
        <View style={styles.disclaimerTitleContainer}>
79
          <Ionicons name="information-circle-outline" size={20} color={Colors.light.tint} />
80
          <Text style={styles.disclaimerTitleText}>Nota de Apoio</Text>
81
        </View>
82
83
        <Text style={styles.disclaimerText}>
84
          Este aplicativo é um assistente digital para
85
          auxiliar no seu monitoramento diário. Em caso
86
          de emergência ou sintomas graves, entre em
87
          contato imediatamente com seu médico ou
88
          serviços de saúde locais.
89
        </Text>
90
91
        <View style={styles.disclaimerHelp}>
92
          <Link href="https://expo.dev" style={styles.disclaimerHelpText}>
93
            Ver canais de ajuda <Octicons name="link-external" size={12} color="black" />
94
          </Link>
95
        </View>
96
      </Card>
97
    </ScreenLayout>
98
  )
99
}
100
101
const styles = StyleSheet.create({
102
  cardIcon: {
103
    paddingVertical: 15,
104
    paddingHorizontal: 14,
105
    width: 48,
106
    borderRadius: BorderRadius.md,
107
  },
108
  cardTitleHeadline: {
109
    ...Typography.headlineMd,
110
    lineHeight: 20,
111
    marginTop: 4
112
  },
113
  cardTitle: {
114
    ...Typography.bodyLg,
115
    lineHeight: 20,
116
    marginTop: 4
117
  },
118
  cardDescriptionHeadline: {
119
    ...Typography.bodyMg,
120
    color: Colors.light.textSecondary,
121
    marginTop: 4
122
  },
123
  cardDescription: {
124
    ...Typography.labelSm,
125
    color: Colors.light.textSecondary,
126
    marginTop: 4
127
  },
128
  disclaimerCard: {
129
    padding: Spacing.cardGap,
130
  },
131
  disclaimerTitleContainer: {
132
    flex: 1,
133
    flexDirection: 'row',
134
    gap: 5,
135
    marginBottom: 10
136
  },
137
  disclaimerTitleText: {
138
    fontWeight: 600,
139
    fontSize: 16,
140
    lineHeight: 20,
141
  },
142
  disclaimerText: {
143
    fontSize: 12,
144
    lineHeight: 18,
145
    color: Colors.light.textSecondary,
146
  },
147
  disclaimerHelp: {
148
    marginTop: 10,
149
    borderTopWidth: 1,
150
    borderTopColor: Colors.light.divider,
151
    paddingTop: 5,
152
  },
153
  disclaimerHelpText: {
154
    color: "#0f172a",
155
    fontWeight: 500,
156
    fontSize: 12,
157
    lineHeight: 16,
158
    alignItems: 'center'
159
  }
160
})