| 1 | import React from "react";
|
| 2 | import { View, StyleSheet } from "react-native";
|
| 3 | import { Text } from "@/components/ui/Text";
|
| 4 | import { Colors, Typography, Spacing, BorderRadius } from "@/constants/theme";
|
| 5 |
|
| 6 | interface WeeklyResumeProps {
|
| 7 | avgMood: string;
|
| 8 | stats: { label: string; value: string }[];
|
| 9 | }
|
| 10 |
|
| 11 | export const WeeklyResume: React.FC<WeeklyResumeProps> = ({
|
| 12 | avgMood,
|
| 13 | stats,
|
| 14 | }) => {
|
| 15 | return (
|
| 16 | <View style={styles.heroCard}>
|
| 17 | <Text style={styles.heroLabel}>Resumo Semanal</Text>
|
| 18 |
|
| 19 | <View style={styles.heroScoreRow}>
|
| 20 | <Text style={styles.heroScore}>{avgMood}</Text>
|
| 21 | </View>
|
| 22 |
|
| 23 | <View style={styles.heroDivider} />
|
| 24 |
|
| 25 | <View style={styles.heroStats}>
|
| 26 | {stats.map((stat) => (
|
| 27 | <View key={stat.label} style={styles.heroStatItem}>
|
| 28 | <Text style={styles.heroStatLabel}>{stat.label}</Text>
|
| 29 | <Text style={styles.heroStatValue}>{stat.value}</Text>
|
| 30 | </View>
|
| 31 | ))}
|
| 32 | </View>
|
| 33 | </View>
|
| 34 | );
|
| 35 | };
|
| 36 |
|
| 37 | const styles = StyleSheet.create({
|
| 38 | heroCard: {
|
| 39 | backgroundColor: Colors.light.black,
|
| 40 | borderRadius: BorderRadius.lg,
|
| 41 | padding: 20,
|
| 42 | marginBottom: Spacing.sectionGap,
|
| 43 | },
|
| 44 | heroLabel: {
|
| 45 | fontSize: 11,
|
| 46 | fontWeight: "600",
|
| 47 | letterSpacing: 0.8,
|
| 48 | textTransform: "uppercase",
|
| 49 | color: Colors.light.tint,
|
| 50 | marginBottom: 8,
|
| 51 | },
|
| 52 | heroScoreRow: {
|
| 53 | flexDirection: "row",
|
| 54 | alignItems: "center",
|
| 55 | gap: 10,
|
| 56 | },
|
| 57 | heroScore: {
|
| 58 | ...Typography.headlineXg,
|
| 59 | fontSize: 52,
|
| 60 | color: "#ffffff",
|
| 61 | },
|
| 62 | heroTrendIcon: {
|
| 63 | marginTop: 6,
|
| 64 | },
|
| 65 | heroDivider: {
|
| 66 | height: StyleSheet.hairlineWidth,
|
| 67 | backgroundColor: "rgba(255,255,255,0.12)",
|
| 68 | marginVertical: 16,
|
| 69 | },
|
| 70 | heroStats: {
|
| 71 | flexDirection: "row",
|
| 72 | gap: Spacing.sectionGap,
|
| 73 | },
|
| 74 | heroStatItem: {
|
| 75 | flex: 1,
|
| 76 | },
|
| 77 | heroStatLabel: {
|
| 78 | fontSize: 12,
|
| 79 | color: "rgba(255,255,255,0.45)",
|
| 80 | fontWeight: "500",
|
| 81 | marginBottom: 4,
|
| 82 | },
|
| 83 | heroStatValue: {
|
| 84 | ...Typography.bodyLg,
|
| 85 | fontSize: 20,
|
| 86 | color: "#ffffff",
|
| 87 | },
|
| 88 | });
|