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

components/Leaderboard.tsx

@@ -1,10 +1,13 @@
 "use client";
 
+import { useEffect, useState } from "react";
+
 interface LeaderboardEntry {
   rank: number;
   username: string;
   score: number;
   level: number;
+  avatar?: string | null;
 }
 
 // Format number with consistent locale to avoid hydration mismatch
@@ -12,20 +15,32 @@ const formatScore = (score: number): string => {
   return score.toLocaleString("en-US");
 };
 
-const mockLeaderboard: LeaderboardEntry[] = [
-  { rank: 1, username: "DragonSlayer99", score: 125000, level: 85 },
-  { rank: 2, username: "MineMaster", score: 118500, level: 82 },
-  { rank: 3, username: "CraftKing", score: 112000, level: 80 },
-  { rank: 4, username: "PixelWarrior", score: 105500, level: 78 },
-  { rank: 5, username: "FarminePro", score: 99000, level: 75 },
-  { rank: 6, username: "GoldDigger", score: 92500, level: 73 },
-  { rank: 7, username: "EpicGamer", score: 87000, level: 71 },
-  { rank: 8, username: "Legendary", score: 81500, level: 69 },
-  { rank: 9, username: "MysticMiner", score: 76000, level: 67 },
-  { rank: 10, username: "TopPlayer", score: 70500, level: 65 },
-];
-
 export default function Leaderboard() {
+  const [leaderboard, setLeaderboard] = useState<LeaderboardEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch("/api/leaderboard")
+      .then((res) => res.json())
+      .then((data) => {
+        setLeaderboard(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error("Error fetching leaderboard:", err);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) {
+    return (
+      <section className="w-full bg-black py-16 px-6 border-t-2 border-pixel-dark-purple">
+        <div className="max-w-4xl mx-auto text-center text-pixel-gold">
+          Chargement...
+        </div>
+      </section>
+    );
+  }
   return (
     <section className="w-full bg-black py-16 px-6 border-t-2 border-pixel-dark-purple">
       <div className="max-w-4xl mx-auto">
@@ -44,7 +59,7 @@ export default function Leaderboard() {
 
           {/* Entries */}
           <div className="divide-y divide-pixel-gold/10">
-            {mockLeaderboard.map((entry) => (
+            {leaderboard.map((entry) => (
               <div
                 key={entry.rank}
                 className={`grid grid-cols-12 gap-4 p-4 hover:bg-gray-900/50 transition ${