Refactor page components to use NavigationWrapper and integrate Prisma for data fetching. Update EventsSection and LeaderboardSection to accept props for events and leaderboard data, enhancing performance and user experience. Implement user authentication in ProfilePage and AdminPage, ensuring secure access to user data.

app/leaderboard/page.tsx

@@ -1,12 +1,51 @@
-import Navigation from "@/components/Navigation";
+import NavigationWrapper from "@/components/NavigationWrapper";
 import LeaderboardSection from "@/components/LeaderboardSection";
+import { prisma } from "@/lib/prisma";
+import { getBackgroundImage } from "@/lib/preferences";
+
+interface LeaderboardEntry {
+  rank: number;
+  username: string;
+  score: number;
+  level: number;
+  avatar: string | null;
+}
+
+export default async function LeaderboardPage() {
+  const users = await prisma.user.findMany({
+    orderBy: {
+      score: "desc",
+    },
+    take: 10,
+    select: {
+      id: true,
+      username: true,
+      score: true,
+      level: true,
+      avatar: true,
+    },
+  });
+
+  const leaderboard: LeaderboardEntry[] = users.map((user, index) => ({
+    rank: index + 1,
+    username: user.username,
+    score: user.score,
+    level: user.level,
+    avatar: user.avatar,
+  }));
+
+  const backgroundImage = await getBackgroundImage(
+    "leaderboard",
+    "/leaderboard-bg.jpg"
+  );
 
-export default function LeaderboardPage() {
   return (
     <main className="min-h-screen bg-black relative">
-      <Navigation />
-      <LeaderboardSection />
+      <NavigationWrapper />
+      <LeaderboardSection
+        leaderboard={leaderboard}
+        backgroundImage={backgroundImage}
+      />
     </main>
   );
 }
-