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.
90 lines
2.1 KiB
90 lines
2.1 KiB
import {SafeAreaView,StyleSheet, Text, View} from "react-native";
|
|
import React from "react";
|
|
import {AntDesign} from "@expo/vector-icons";
|
|
import {Avatar, AvatarFallbackText, AvatarImage} from "@/ui/avatar";
|
|
|
|
|
|
|
|
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}>
|
|
|
|
<Text style={styles.titleNameUser}>Hello, Tata Monique</Text>
|
|
|
|
</View>
|
|
|
|
</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: {
|
|
|
|
}
|
|
|
|
|
|
}); |