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