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.
51 lines
1.8 KiB
51 lines
1.8 KiB
import {FlatList, TouchableOpacity,Text, View} from "react-native";
|
|
import {useState} from "react";
|
|
import dayjs from "dayjs";
|
|
|
|
export default function CalendarComponent() {
|
|
const [selectedDay] = useState(dayjs().date());
|
|
|
|
const days = Array.from({ length: 7 }, (_, index) => {
|
|
const day = dayjs().add(index, "day");
|
|
return {
|
|
id: day.date(),
|
|
label: day.format("ddd"),
|
|
};
|
|
});
|
|
|
|
return (
|
|
<View className="bg-transparent">
|
|
<FlatList
|
|
horizontal
|
|
data={days}
|
|
keyExtractor={(item) => item.id.toString()}
|
|
showsHorizontalScrollIndicator={false}
|
|
contentContainerStyle={{ gap: 12 }} // Espacement entre les items
|
|
renderItem={({ item }) => (
|
|
<TouchableOpacity
|
|
className={`w-16 h-20 flex items-center justify-center rounded-xl ${
|
|
selectedDay === item.id
|
|
? "bg-orange-500 border-2 border-orange-300"
|
|
: "bg-black"
|
|
}`}
|
|
>
|
|
<Text
|
|
className={`text-sm ${
|
|
selectedDay === item.id ? "text-white" : "text-gray-400"
|
|
}`}
|
|
>
|
|
{item.label}
|
|
</Text>
|
|
<Text
|
|
className={`text-lg font-bold ${
|
|
selectedDay === item.id ? "text-white" : "text-gray-200"
|
|
}`}
|
|
>
|
|
{item.id}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
/>
|
|
</View>
|
|
);
|
|
} |