eletrotupi / tcc/ frontend/app/(tabs)/actions.tsxbd62b645a9dc9b775e0e82f727d61f17fbdbdcee
3.2 KB | 106 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 } 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';
12
13
export default function Actions() {
14
  const { user } = useAuth();
15
16
  return (
17
    <ScreenLayout userName={user.firstName} userAvatar={user.avatarURL}
18
      onNotificationPress={() => console.log('Notifications')}
19
      showNotificationBadge={true}>
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>
75
    </ScreenLayout>
76
  )
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
})