69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
type Slot = {
|
|
id: string;
|
|
slug: string;
|
|
label: string;
|
|
sport: string;
|
|
time: string;
|
|
capacity: number;
|
|
booked: number;
|
|
isFull: boolean;
|
|
};
|
|
|
|
export default function Availability({
|
|
sport,
|
|
}: {
|
|
sport: "muay-thai" | "yoga";
|
|
}) {
|
|
const [slots, setSlots] = useState<Slot[]>([]);
|
|
|
|
useEffect(() => {
|
|
fetch("/api/classes")
|
|
.then((r) => r.json())
|
|
.then((d) =>
|
|
setSlots(
|
|
(Array.isArray(d) ? d : []).filter((s: Slot) => s.sport === sport)
|
|
)
|
|
)
|
|
.catch(() => {});
|
|
}, [sport]);
|
|
|
|
if (slots.length === 0) return null;
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{slots.map((slot) => {
|
|
const remaining = Math.max(0, slot.capacity - slot.booked);
|
|
const isFull = slot.isFull || remaining === 0;
|
|
return (
|
|
<div
|
|
key={slot.id}
|
|
className="flex items-center justify-between rounded-xl border border-white/10 bg-white/5 px-4 py-3"
|
|
>
|
|
<div>
|
|
<p className="font-semibold">{slot.label}</p>
|
|
<p className="text-xs text-white/50">{slot.time}</p>
|
|
</div>
|
|
{isFull ? (
|
|
<span className="rounded-full bg-red-500/20 px-3 py-1 text-xs font-bold text-red-300">
|
|
❌ COMPLET
|
|
</span>
|
|
) : remaining <= 3 ? (
|
|
<span className="rounded-full bg-amber-500/20 px-3 py-1 text-xs font-bold text-amber-300">
|
|
⚡ Plus que {remaining}{" "}
|
|
place{remaining > 1 ? "s" : ""} !
|
|
</span>
|
|
) : (
|
|
<span className="rounded-full bg-emerald-500/20 px-3 py-1 text-xs font-bold text-emerald-300">
|
|
{remaining} places libres
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
} |