Add slots based per class, admin courses mgmt, admin roles, horizontal nav/landing, glove favicon

2026-09-08 09:10:37 +02:00
parent 3f4fdeba99
commit 7556b2cd97
15 changed files with 439 additions and 74 deletions
@@ -0,0 +1,69 @@
+"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>
+  );
+}