eletrotupi / tcc/ frontend/components/history/AppointmentHistoryCard.tsx842d379ae593e2c6affc4c6226e8035fabe8fcd5
2.2 KB | 74 lines Raw
1
import { View, StyleSheet } from "react-native";
2
import { Text } from "@/components/ui/Text";
3
import { MaterialIcons } from "@expo/vector-icons";
4
import { Card } from "@/components/ui/Cards";
5
import { Badge } from "@/components/ui/Badge";
6
import type { HistoryCard } from "@/lib/history/types";
7
import type { CareAction } from "@/lib/api";
8
import { Spacing } from "@/constants/theme";
9
import { router } from "expo-router";
10
11
type Props = { card: HistoryCard & { raw: CareAction } };
12
13
export function AppointmentHistoryCard({ card }: Props) {
14
  const time = new Date(card.timestamp).toLocaleTimeString("pt-BR", {
15
    hour: "2-digit",
16
    minute: "2-digit",
17
  });
18
19
  return (
20
    <Card
21
      style={styles.card}
22
      onPress={() => router.push(`/care-actions/${card.raw.id}`)}
23
    >
24
      <View style={styles.row}>
25
        <View style={[styles.iconWrap, styles.iconBg]}>
26
          <MaterialIcons name="psychology" size={22} color="#1D4ED8" />
27
        </View>
28
        <View style={styles.body}>
29
          <View style={styles.titleRow}>
30
            <Text style={styles.title}>{card.title}</Text>
31
            <Text style={styles.time}>{time}</Text>
32
          </View>
33
          {card.summary ? (
34
            <Text style={styles.summary} numberOfLines={2}>
35
              {card.summary}
36
            </Text>
37
          ) : null}
38
          {card.badge ? (
39
            <Badge
40
              label={card.badge.label}
41
              variant={card.badge.variant}
42
              style={styles.badge}
43
            />
44
          ) : null}
45
        </View>
46
      </View>
47
    </Card>
48
  );
49
}
50
51
const styles = StyleSheet.create({
52
  card: { padding: Spacing.cardGap },
53
  row: { flexDirection: "row", alignItems: "flex-start", gap: 12 },
54
  iconWrap: {
55
    width: 40,
56
    height: 40,
57
    borderRadius: 20,
58
    alignItems: "center",
59
    justifyContent: "center",
60
    marginTop: 1,
61
  },
62
  iconBg: { backgroundColor: "#DBEAFE" },
63
  body: { flex: 1 },
64
  titleRow: {
65
    flexDirection: "row",
66
    justifyContent: "space-between",
67
    alignItems: "center",
68
    marginBottom: 2,
69
  },
70
  title: { fontSize: 15, fontWeight: "400" },
71
  time: { fontSize: 13, opacity: 0.45 },
72
  summary: { fontSize: 13, opacity: 0.6, lineHeight: 18, marginBottom: 6 },
73
  badge: { alignSelf: "flex-start", marginTop: 4 },
74
});