eletrotupi / tcc/ frontend/components/ui/DailySleepWidget.tsx8873ae72bb5c5381f95356155b0c0cb1d4041156
1.9 KB | 75 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;
13
14
  const diffColor = metadata?.diffMinutes
15
    ? metadata.diffMinutes < 0
16
      ? Colors.light.danger
17
      : Colors.light.tint
18
    : Colors.light.tint;
19
20
  return (
21
    <Card style={{ padding: Spacing.cardGap }}>
22
      <View
23
        style={{
24
          flex: 1,
25
          flexDirection: "row",
26
          flexGrow: 0,
27
          paddingVertical: 10,
28
        }}
29
      >
30
        <Ionicons name="moon" size={20} color="#64748B" />
31
32
        <Text style={{ ...Typography.headlineMd, marginBottom: 10 }}>Sono</Text>
33
      </View>
34
35
      <View style={{ flex: 1 }}>
36
        {isLoading ? (
37
          <View style={styles.empty}>
38
            <ActivityIndicator size="small" style={{ paddingBottom: 50 }} />
39
          </View>
40
        ) : insight ? (
41
          <>
42
            <Text style={{ ...Typography.headlineMd, marginBottom: 10 }}>
43
              {insight.body}
44
            </Text>
45
            <Text style={{ ...styles.indicatorGreen, color: diffColor }}>
46
              {metadata?.diffStr}
47
            </Text>
48
          </>
49
        ) : (
50
          <>
51
            <Text style={styles.empty}>
52
              Não há dados disponíveis para o dia de hoje
53
            </Text>
54
          </>
55
        )}
56
      </View>
57
    </Card>
58
  );
59
};
60
61
const styles = StyleSheet.create({
62
  container: {
63
    flex: 1,
64
    padding: Spacing.cardGap,
65
  },
66
  indicatorGreen: {
67
    fontSize: 11,
68
    fontWeight: 600,
69
    lineHeight: 16.5,
70
  },
71
  empty: {
72
    ...Typography.labelSm,
73
    opacity: 0.5,
74
  },
75
});