110 lines
3.2 KiB
TypeScript
110 lines
3.2 KiB
TypeScript
import { DateTime } from "luxon";
|
|
import type { Colle, UserPreferences } from "~/lib/api";
|
|
import { Badge } from "~/components/ui/badge";
|
|
import ColleCard from "~/components/home/colle-card";
|
|
import ColleCardSkeleton from "~/components/home/skeleton-card";
|
|
|
|
type TabContentProps = {
|
|
tabTitle: string;
|
|
emptyCollesText: string;
|
|
isLoading: boolean;
|
|
colles: Colle[];
|
|
isSorted?: boolean;
|
|
preferences: UserPreferences;
|
|
};
|
|
|
|
const WEEK_DAYS = [
|
|
"Lundi",
|
|
"Mardi",
|
|
"Mercredi",
|
|
"Jeudi",
|
|
"Vendredi",
|
|
"Samedi",
|
|
"Dimanche",
|
|
];
|
|
|
|
export default function TabContent({
|
|
tabTitle,
|
|
emptyCollesText,
|
|
isLoading,
|
|
colles,
|
|
isSorted,
|
|
preferences,
|
|
}: TabContentProps) {
|
|
const collesByDay: Record<string, Colle[]> = {};
|
|
colles.forEach((colle) => {
|
|
const date = DateTime.fromISO(colle.date);
|
|
const dayName = WEEK_DAYS[date.weekday - 1]; // Luxon weekday is 1-7 (Mon-Sun)
|
|
if (!collesByDay[dayName]) {
|
|
collesByDay[dayName] = [];
|
|
}
|
|
collesByDay[dayName].push(colle);
|
|
});
|
|
|
|
const days = WEEK_DAYS.filter(
|
|
(day) => collesByDay[day] && collesByDay[day].length > 0
|
|
);
|
|
// If not sorted, reverse the order of days
|
|
if (!isSorted) {
|
|
days.reverse();
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<h2 className="text-2xl font-semibold mb-6">{tabTitle}</h2>
|
|
{isLoading ? (
|
|
<div className="space-y-8">
|
|
{WEEK_DAYS.slice(0, 2).map((day) => (
|
|
<div key={day} className="space-y-4">
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="text-xl font-medium">{day}</h3>
|
|
<Badge variant="outline" className="text-sm">
|
|
Chargement...
|
|
</Badge>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{Array(3)
|
|
.fill(0)
|
|
.map((_, i) => (
|
|
<ColleCardSkeleton key={i} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : colles.length === 0 ? (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
{emptyCollesText}
|
|
</div>
|
|
) : (
|
|
<div className="space-y-8">
|
|
{days.map((day) => (
|
|
<div key={day} className="space-y-4">
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="text-xl font-medium">{day}</h3>
|
|
<Badge variant="outline" className="text-sm">
|
|
{collesByDay[day].length} colle
|
|
{collesByDay[day].length !== 1 ? "s" : ""}
|
|
</Badge>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{collesByDay[day].map((colle) => (
|
|
<ColleCard
|
|
key={colle.id}
|
|
colle={colle}
|
|
onToggleFavorite={() => {}}
|
|
isFavorite={false}
|
|
preferences={preferences}
|
|
// TODO: Implement favorite toggle
|
|
// onToggleFavorite={handleToggleFavorite}
|
|
// isFavorite={isFavorite(colle)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|