Add database and Prisma configurations, enhance event and leaderboard components with API integration, and update navigation for session management

components/EventsPageSection.tsx

@@ -1,80 +1,25 @@
 "use client";
 
+import { useEffect, useState } from "react";
+
 interface Event {
-  id: number;
+  id: string;
   date: string;
   name: string;
   description: string;
-  type: "summit" | "launch" | "festival" | "competition";
-  status: "upcoming" | "live" | "past";
+  type: "SUMMIT" | "LAUNCH" | "FESTIVAL" | "COMPETITION";
+  status: "UPCOMING" | "LIVE" | "PAST";
 }
 
-const events: Event[] = [
-  {
-    id: 1,
-    date: "18 NOVEMBRE 2023",
-    name: "Sommet de l'Innovation Tech",
-    description:
-      "Rejoignez les leaders de l'industrie et les innovateurs pour une journée de discussions sur les technologies de pointe, les percées de l'IA et des opportunités de networking.",
-    type: "summit",
-    status: "past",
-  },
-  {
-    id: 2,
-    date: "3 DÉCEMBRE 2023",
-    name: "Lancement de la Révolution IA",
-    description:
-      "Assistez au lancement de systèmes d'IA révolutionnaires qui vont remodeler le paysage du gaming. Aperçus exclusifs et opportunités d'accès anticipé.",
-    type: "launch",
-    status: "past",
-  },
-  {
-    id: 3,
-    date: "22 DÉCEMBRE 2023",
-    name: "Festival du Code d'Hiver",
-    description:
-      "Une célébration de l'excellence en programmation avec des hackathons, des défis de codage et des prix. Montrez vos compétences et rivalisez avec les meilleurs développeurs.",
-    type: "festival",
-    status: "past",
-  },
-  {
-    id: 4,
-    date: "15 JANVIER 2024",
-    name: "Expo Informatique Quantique",
-    description:
-      "Explorez l'avenir de l'informatique quantique dans le gaming. Démonstrations interactives, conférences d'experts et ateliers pratiques pour tous les niveaux.",
-    type: "summit",
-    status: "upcoming",
-  },
-  {
-    id: 5,
-    date: "8 FÉVRIER 2024",
-    name: "Championnat Cyber Arena",
-    description:
-      "L'événement de gaming compétitif ultime. Compétissez pour la gloire, des récompenses exclusives et le titre de Champion Cyber Arena. Inscriptions ouvertes.",
-    type: "competition",
-    status: "upcoming",
-  },
-  {
-    id: 6,
-    date: "12 MARS 2024",
-    name: "Gala Tech du Printemps",
-    description:
-      "Une soirée élégante célébrant les réalisations technologiques. Cérémonie de remise de prix, networking et annonces exclusives des plus grandes entreprises tech.",
-    type: "festival",
-    status: "upcoming",
-  },
-];
-
 const getEventTypeColor = (type: Event["type"]) => {
   switch (type) {
-    case "summit":
+    case "SUMMIT":
       return "from-blue-600 to-cyan-500";
-    case "launch":
+    case "LAUNCH":
       return "from-purple-600 to-pink-500";
-    case "festival":
+    case "FESTIVAL":
       return "from-pixel-gold to-orange-500";
-    case "competition":
+    case "COMPETITION":
       return "from-red-600 to-orange-500";
     default:
       return "from-gray-600 to-gray-500";
@@ -83,13 +28,13 @@ const getEventTypeColor = (type: Event["type"]) => {
 
 const getEventTypeLabel = (type: Event["type"]) => {
   switch (type) {
-    case "summit":
+    case "SUMMIT":
       return "Sommet";
-    case "launch":
+    case "LAUNCH":
       return "Lancement";
-    case "festival":
+    case "FESTIVAL":
       return "Festival";
-    case "competition":
+    case "COMPETITION":
       return "Compétition";
     default:
       return type;
@@ -98,19 +43,19 @@ const getEventTypeLabel = (type: Event["type"]) => {
 
 const getStatusBadge = (status: Event["status"]) => {
   switch (status) {
-    case "upcoming":
+    case "UPCOMING":
       return (
         <span className="px-3 py-1 bg-green-900/50 border border-green-500/50 text-green-400 text-xs uppercase tracking-widest rounded">
           À venir
         </span>
       );
-    case "live":
+    case "LIVE":
       return (
         <span className="px-3 py-1 bg-red-900/50 border border-red-500/50 text-red-400 text-xs uppercase tracking-widest rounded animate-pulse">
           En direct
         </span>
       );
-    case "past":
+    case "PAST":
       return (
         <span className="px-3 py-1 bg-gray-800/50 border border-gray-600/50 text-gray-400 text-xs uppercase tracking-widest rounded">
           Passé
@@ -120,6 +65,29 @@ const getStatusBadge = (status: Event["status"]) => {
 };
 
 export default function EventsPageSection() {
+  const [events, setEvents] = useState<Event[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch("/api/events")
+      .then((res) => res.json())
+      .then((data) => {
+        setEvents(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error("Error fetching events:", err);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) {
+    return (
+      <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24 pb-16">
+        <div className="text-pixel-gold text-xl">Chargement...</div>
+      </section>
+    );
+  }
   return (
     <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24 pb-16">
       {/* Background Image */}
@@ -198,17 +166,17 @@ export default function EventsPageSection() {
                 </p>
 
                 {/* Action Button */}
-                {event.status === "upcoming" && (
+                {event.status === "UPCOMING" && (
                   <button className="w-full px-4 py-2 border border-pixel-gold/50 bg-black/40 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition">
                     S'inscrire maintenant
                   </button>
                 )}
-                {event.status === "live" && (
+                {event.status === "LIVE" && (
                   <button className="w-full px-4 py-2 border border-red-500/50 bg-red-900/20 text-red-400 uppercase text-xs tracking-widest rounded hover:bg-red-900/30 transition animate-pulse">
                     Rejoindre en direct
                   </button>
                 )}
-                {event.status === "past" && (
+                {event.status === "PAST" && (
                   <button className="w-full px-4 py-2 border border-gray-600/50 bg-gray-900/20 text-gray-500 uppercase text-xs tracking-widest rounded cursor-not-allowed">
                     Événement terminé
                   </button>