You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Mobile/app/(tabs)/(home)/index.tsx

98 lines
2.4 KiB

import { SafeAreaView, StyleSheet, View } from "react-native";
import React from "react";
import {
Avatar,
AvatarFallbackText,
AvatarImage,
} from "@/components/ui/avatar";
import { AntDesign } from "@expo/vector-icons";
import { Text } from "@/components/ui/text";
import ExerciceOverview from "@/components/ExerciceOverview";
export default function HomeScreen() {
const date = new Date();
const formattedDate = date.toLocaleDateString("fr-FR", {
year: "numeric",
month: "long",
day: "numeric",
});
return (
<SafeAreaView style={styles.container}>
<View style={styles.headerStyle}>
<View style={styles.dateContainer}>
<AntDesign name="calendar" size={24} color="white" />
<Text style={styles.dateText}>{formattedDate}</Text>
</View>
<View style={styles.avatarContainer}>
<Avatar size="xl">
<AvatarFallbackText>Jane Doe</AvatarFallbackText>
<AvatarImage
source={{
uri: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80",
}}
/>
</Avatar>
<Text style={styles.titleNameUser}>Hello, Tata Monique</Text>
</View>
</View>
<View>
<ExerciceOverview />
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#f9f9f9", // Fond de l'écran avec une couleur claire
},
headerStyle: {
height: 200,
backgroundColor: "#333333", // Gris foncé pour l'arrière-plan du header
borderBottomEndRadius: 25,
borderBottomStartRadius: 25,
padding: 20,
alignItems: "flex-start",
justifyContent: "flex-start",
},
dateContainer: {
flexDirection: "row",
alignItems: "flex-start",
marginBottom: 20,
},
dateText: {
fontSize: 18,
fontWeight: "bold",
marginLeft: 10,
color: "#ffffff",
},
avatarContainer: {
marginBottom: 15,
flexDirection: "row",
alignItems: "center",
},
titleNameUser: {
fontSize: 24,
color: "#ffffff",
fontWeight: "bold",
marginLeft: 10,
},
contentContainer: {
marginTop: 20,
padding: 15,
alignItems: "flex-start",
},
contentText: {
fontSize: 16,
color: "#333333", // Texte en gris foncé pour une bonne lisibilité
textAlign: "center",
},
fitness: {},
});