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