eletrotupi / tcc/ frontend/app/care-actions/new.tsxc901c35af9c84b6a29e5185545ced1129f33b8f4
3.8 KB | 125 lines Raw
1
import {
2
  View,
3
  StyleSheet,
4
  KeyboardAvoidingView,
5
  ScrollView,
6
  TouchableOpacity,
7
} from "react-native";
8
import { Text } from "@/components/ui/Text";
9
import { router } from "expo-router";
10
11
import { Spacing, Typography, Colors, BorderRadius, Shadows } from "@/constants/theme";
12
import { Ionicons } from "@expo/vector-icons";
13
14
export default function NewCareAction() {
15
  return (
16
    <KeyboardAvoidingView behavior="height" style={styles.keyboardView}>
17
      <ScrollView scrollEventThrottle={16}>
18
        <View style={styles.container}>
19
          <View style={styles.header}>
20
            <Text style={styles.headerTitle}>Que tipo de ação?</Text>
21
            <Text style={styles.headerSubtitle}>
22
              Selecione o tipo de ação de cuidado que deseja registrar
23
            </Text>
24
          </View>
25
26
          <TouchableOpacity
27
            style={styles.typeCard}
28
            activeOpacity={0.7}
29
            onPress={() => router.push('/care-actions/medicine')}
30
          >
31
            <View style={[styles.typeIcon, { backgroundColor: '#E7FDEF' }]}>
32
              <Ionicons name="bandage-outline" size={24} color="#13EC5B" />
33
            </View>
34
            <View style={styles.typeTextWrap}>
35
              <Text style={styles.typeTitle}>Medicamento</Text>
36
              <Text style={styles.typeDesc}>Registre a tomada de um medicamento</Text>
37
            </View>
38
            <Ionicons name="chevron-forward" size={20} color={Colors.light.disabled} />
39
          </TouchableOpacity>
40
41
          <TouchableOpacity
42
            style={styles.typeCard}
43
            activeOpacity={0.7}
44
            onPress={() => router.push('/care-actions/appointment')}
45
          >
46
            <View style={[styles.typeIcon, { backgroundColor: '#EFF6FF' }]}>
47
              <Ionicons name="medkit-outline" size={24} color="#2563EB" />
48
            </View>
49
            <View style={styles.typeTextWrap}>
50
              <Text style={styles.typeTitle}>Consulta</Text>
51
              <Text style={styles.typeDesc}>Registre uma consulta ou sessão</Text>
52
            </View>
53
            <Ionicons name="chevron-forward" size={20} color={Colors.light.disabled} />
54
          </TouchableOpacity>
55
56
          <TouchableOpacity
57
            style={styles.typeCard}
58
            activeOpacity={0.7}
59
            onPress={() => router.push('/care-actions/activity')}
60
          >
61
            <View style={[styles.typeIcon, { backgroundColor: '#FFF7ED' }]}>
62
              <Ionicons name="walk-outline" size={24} color="#EA580C" />
63
            </View>
64
            <View style={styles.typeTextWrap}>
65
              <Text style={styles.typeTitle}>Atividade</Text>
66
              <Text style={styles.typeDesc}>Registre uma atividade física ou mental</Text>
67
            </View>
68
            <Ionicons name="chevron-forward" size={20} color={Colors.light.disabled} />
69
          </TouchableOpacity>
70
        </View>
71
      </ScrollView>
72
    </KeyboardAvoidingView>
73
  );
74
}
75
76
const styles = StyleSheet.create({
77
  keyboardView: {
78
    flex: 1,
79
  },
80
  container: {
81
    gap: 24,
82
    paddingHorizontal: Spacing.containerPadding,
83
    paddingVertical: Spacing.sectionGap,
84
    marginBottom: 50,
85
  },
86
  header: {
87
    gap: 8,
88
  },
89
  headerTitle: {
90
    ...Typography.headlineMd,
91
  },
92
  headerSubtitle: {
93
    ...Typography.bodyMd,
94
    color: Colors.light.textSecondary,
95
  },
96
  typeCard: {
97
    flexDirection: 'row',
98
    alignItems: 'center',
99
    backgroundColor: '#fff',
100
    borderRadius: BorderRadius.lg,
101
    padding: Spacing.cardGap,
102
    borderWidth: 1,
103
    borderColor: Colors.light.divider,
104
    gap: 12,
105
    ...Shadows.sm,
106
  },
107
  typeIcon: {
108
    width: 48,
109
    height: 48,
110
    borderRadius: BorderRadius.md,
111
    alignItems: 'center',
112
    justifyContent: 'center',
113
  },
114
  typeTextWrap: {
115
    flex: 1,
116
    gap: 2,
117
  },
118
  typeTitle: {
119
    ...Typography.bodyLg,
120
  },
121
  typeDesc: {
122
    ...Typography.labelSm,
123
    color: Colors.light.textSecondary,
124
  },
125
});