eletrotupi / tcc/ frontend/components/ui/DailySleepWidget.tsx1177778ae361b58371a1dabb3aeec3b0b03e0ff9
2.0 KB | 79 lines Raw
1
import React from "react";
2
import { View, Text, StyleSheet, ActivityIndicator } from "react-native";
3
import { Card } from "./Cards";
4
import { Colors, Spacing, Typography } from "@/constants/theme";
5
import { Ionicons } from "@expo/vector-icons";
6
import { useInsight } from "@/hooks/useInsights.queries";
7
8
export const DailySleepWidget = () => {
9
  const { data: insight, isLoading } = useInsight("DAILY_SLEEP");
10
11
  const metadata = insight?.metadata as
12
    | {
13
        diffStr: string;
14
        diffMinutes: number;
15
      }
16
    | undefined;
17
18
  const diffColor = metadata?.diffMinutes
19
    ? metadata.diffMinutes < 0
20
      ? Colors.light.danger
21
      : Colors.light.tint
22
    : Colors.light.tint;
23
24
  return (
25
    <Card style={{ padding: Spacing.cardGap }}>
26
      <View
27
        style={{
28
          flex: 1,
29
          flexDirection: "row",
30
          flexGrow: 0,
31
          paddingVertical: 10,
32
        }}
33
      >
34
        <Ionicons name="moon" size={20} color="#64748B" />
35
36
        <Text style={{ ...Typography.headlineMd, marginBottom: 10 }}>Sono</Text>
37
      </View>
38
39
      <View style={{ flex: 1 }}>
40
        {isLoading ? (
41
          <View style={styles.empty}>
42
            <ActivityIndicator size="small" style={{ paddingBottom: 50 }} />
43
          </View>
44
        ) : insight ? (
45
          <>
46
            <Text style={{ ...Typography.headlineMd, marginBottom: 10 }}>
47
              {insight.body}
48
            </Text>
49
            <Text style={{ ...styles.indicatorGreen, color: diffColor }}>
50
              {metadata?.diffStr}
51
            </Text>
52
          </>
53
        ) : (
54
          <>
55
            <Text style={styles.empty}>
56
              Não há dados disponíveis para o dia de hoje
57
            </Text>
58
          </>
59
        )}
60
      </View>
61
    </Card>
62
  );
63
};
64
65
const styles = StyleSheet.create({
66
  container: {
67
    flex: 1,
68
    padding: Spacing.cardGap,
69
  },
70
  indicatorGreen: {
71
    fontSize: 11,
72
    fontWeight: 600,
73
    lineHeight: 16.5,
74
  },
75
  empty: {
76
    ...Typography.labelSm,
77
    opacity: 0.5,
78
  },
79
});