From 41a938105d3694067ae217f9faad52f738d41c2d Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Mon, 2 Feb 2026 00:19:38 +0100
Subject: [PATCH] Leaderboards

---
 src/app/leaderboards/page.tsx | 158 ++++++++++++++++++++++++++++++++++
 1 file changed, 158 insertions(+)
 create mode 100644 src/app/leaderboards/page.tsx

diff --git a/src/app/leaderboards/page.tsx b/src/app/leaderboards/page.tsx
new file mode 100644
index 0000000..8eada98
--- /dev/null
+++ b/src/app/leaderboards/page.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import { Trophy, Calendar, Globe, TrendingUp } from "lucide-react";
+import LeaderboardRow from "@/components/app/LeaderboardRow";
+import { useState } from "react";
+
+const Leaderboards = () => {
+    const [activeTab, setActiveTab] = useState<"global" | "weekly">("global");
+
+    const globalLeaderboard = [
+        { rank: 1, username: "speedmaster_x", pb: "2:34.21", runsCount: 2341, category: "Any%" },
+        { rank: 2, username: "algo_ninja", pb: "2:38.54", runsCount: 1876, category: "Any%" },
+        { rank: 3, username: "clockwork", pb: "2:41.02", runsCount: 3102, category: "Any%" },
+        { rank: 4, username: "fastfingers99", pb: "2:45.33", runsCount: 987, category: "Any%" },
+        { rank: 5, username: "recursion_queen", pb: "2:47.89", runsCount: 1543, category: "Any%" },
+        { rank: 6, username: "bitshifter", pb: "2:52.11", runsCount: 2109, category: "Any%" },
+        { rank: 7, username: "nullpointer", pb: "2:54.67", runsCount: 876, category: "Any%" },
+        { rank: 8, username: "stackattack", pb: "2:58.23", runsCount: 1234, category: "Any%" },
+        { rank: 9, username: "looplegend", pb: "3:01.45", runsCount: 654, category: "Any%" },
+        { rank: 10, username: "coderunner", pb: "3:05.78", runsCount: 1098, category: "Any%" },
+    ];
+
+    const weeklyLeaderboard = [
+        { rank: 1, username: "weekly_warrior", pb: "2:51.33", runsCount: 156, category: "Any%" },
+        { rank: 2, username: "speedmaster_x", pb: "2:53.12", runsCount: 89, category: "Any%" },
+        { rank: 3, username: "newbie_grinder", pb: "2:58.67", runsCount: 234, category: "Any%" },
+        { rank: 4, username: "algo_ninja", pb: "3:02.45", runsCount: 67, category: "Any%" },
+        { rank: 5, username: "fresh_runner", pb: "3:05.89", runsCount: 45, category: "Any%" },
+        { rank: 6, username: "practice_makes", pb: "3:08.12", runsCount: 112, category: "Any%" },
+        { rank: 7, username: "splitmaster", pb: "3:12.34", runsCount: 78, category: "Any%" },
+        { rank: 8, username: "grindtime", pb: "3:15.56", runsCount: 92, category: "Any%" },
+        { rank: 9, username: "pb_hunter", pb: "3:18.90", runsCount: 56, category: "Any%" },
+        { rank: 10, username: "reset_king", pb: "3:22.11", runsCount: 187, category: "Any%" },
+    ];
+
+    const categories = ["Any%", "100%", "Easy Only", "No DP", "Blind"];
+
+    return (
+        <div className="min-h-screen pt-24 pb-16">
+            <div className="container mx-auto px-6">
+                {/* Header */}
+                <div className="mb-10">
+                    <h1 className="text-4xl font-bold text-foreground mb-2">Leaderboards</h1>
+                    <p className="text-muted-foreground">The fastest runners in the game. Will you claim a spot?</p>
+                </div>
+
+                {/* Stats Row */}
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+                    <div className="bg-card border border-border rounded-xl p-4 text-center">
+                        <Globe className="h-5 w-5 text-primary mx-auto mb-2" />
+                        <p className="text-2xl font-bold font-mono text-foreground">12,453</p>
+                        <p className="text-xs text-muted-foreground">Total Runners</p>
+                    </div>
+                    <div className="bg-card border border-border rounded-xl p-4 text-center">
+                        <Trophy className="h-5 w-5 text-gold mx-auto mb-2" />
+                        <p className="text-2xl font-bold font-mono text-foreground">2:34.21</p>
+                        <p className="text-xs text-muted-foreground">World Record</p>
+                    </div>
+                    <div className="bg-card border border-border rounded-xl p-4 text-center">
+                        <TrendingUp className="h-5 w-5 text-emerald-400 mx-auto mb-2" />
+                        <p className="text-2xl font-bold font-mono text-foreground">847K</p>
+                        <p className="text-xs text-muted-foreground">Runs This Week</p>
+                    </div>
+                    <div className="bg-card border border-border rounded-xl p-4 text-center">
+                        <Calendar className="h-5 w-5 text-primary mx-auto mb-2" />
+                        <p className="text-2xl font-bold font-mono text-foreground">5d 12h</p>
+                        <p className="text-xs text-muted-foreground">Until Reset</p>
+                    </div>
+                </div>
+
+                {/* Tabs and Filters */}
+                <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-6">
+                    {/* Global/Weekly Toggle */}
+                    <div className="flex gap-1 bg-card border border-border rounded-lg p-1">
+                        <button
+                            onClick={() => setActiveTab("global")}
+                            className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all ${activeTab === "global"
+                                ? "bg-primary text-primary-foreground"
+                                : "text-muted-foreground hover:text-foreground"
+                                }`}
+                        >
+                            <Globe className="h-4 w-4" />
+                            Global
+                        </button>
+                        <button
+                            onClick={() => setActiveTab("weekly")}
+                            className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-all ${activeTab === "weekly"
+                                ? "bg-primary text-primary-foreground"
+                                : "text-muted-foreground hover:text-foreground"
+                                }`}
+                        >
+                            <Calendar className="h-4 w-4" />
+                            Weekly
+                        </button>
+                    </div>
+
+                    {/* Category Filter */}
+                    <div className="flex gap-2 flex-wrap">
+                        {categories.map((cat, i) => (
+                            <button
+                                key={cat}
+                                className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${i === 0
+                                    ? "bg-primary/10 text-primary border border-primary/30"
+                                    : "bg-card text-muted-foreground hover:text-foreground border border-border hover:border-primary/30"
+                                    }`}
+                            >
+                                {cat}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+
+                {/* Leaderboard Table */}
+                <div className="bg-card border border-border rounded-xl overflow-hidden">
+                    <table className="w-full">
+                        <thead className="bg-secondary/50">
+                            <tr>
+                                <th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Rank</th>
+                                <th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Runner</th>
+                                <th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">PB</th>
+                                <th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Runs</th>
+                                <th className="py-3 px-4 text-left text-xs font-semibold text-muted-foreground uppercase tracking-wider">Category</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {(activeTab === "global" ? globalLeaderboard : weeklyLeaderboard).map((entry, i) => (
+                                <LeaderboardRow key={entry.username} {...entry} index={i} />
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+
+                {/* Pagination */}
+                <div className="flex items-center justify-center gap-2 mt-6">
+                    <button className="px-3 py-1.5 rounded-lg bg-secondary text-muted-foreground hover:text-foreground transition-all">
+                        Previous
+                    </button>
+                    {[1, 2, 3, '...', 50].map((page, i) => (
+                        <button
+                            key={i}
+                            className={`px-3 py-1.5 rounded-lg transition-all ${page === 1
+                                ? "bg-primary text-primary-foreground"
+                                : "bg-secondary text-muted-foreground hover:text-foreground"
+                                }`}
+                        >
+                            {page}
+                        </button>
+                    ))}
+                    <button className="px-3 py-1.5 rounded-lg bg-secondary text-muted-foreground hover:text-foreground transition-all">
+                        Next
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Leaderboards;