Init

components/Leaderboard.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+interface LeaderboardEntry {
+  rank: number;
+  username: string;
+  score: number;
+  level: number;
+}
+
+// Format number with consistent locale to avoid hydration mismatch
+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() {
+  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">
+        <h2 className="text-4xl md:text-5xl font-bold text-center mb-12 text-pixel-gold text-pixel">
+          LEADERBOARD
+        </h2>
+
+        <div className="bg-black/80 border-2 border-pixel-gold/30 rounded-lg overflow-hidden backdrop-blur-sm">
+          {/* Header */}
+          <div className="bg-gray-900/80 border-b-2 border-pixel-gold/30 grid grid-cols-12 gap-4 p-4 font-bold text-sm text-gray-300">
+            <div className="col-span-1 text-center">Rank</div>
+            <div className="col-span-5">Player</div>
+            <div className="col-span-3 text-right">Score</div>
+            <div className="col-span-3 text-right">Level</div>
+          </div>
+
+          {/* Entries */}
+          <div className="divide-y divide-pixel-gold/10">
+            {mockLeaderboard.map((entry) => (
+              <div
+                key={entry.rank}
+                className={`grid grid-cols-12 gap-4 p-4 hover:bg-gray-900/50 transition ${
+                  entry.rank <= 3 ? "bg-gray-950/50" : "bg-black/40"
+                }`}
+              >
+                <div className="col-span-1 text-center">
+                  <span
+                    className={`inline-block w-8 h-8 rounded-full flex items-center justify-center font-bold ${
+                      entry.rank === 1
+                        ? "bg-pixel-gold text-black"
+                        : entry.rank === 2
+                        ? "bg-gray-600 text-white"
+                        : entry.rank === 3
+                        ? "bg-orange-800 text-white"
+                        : "bg-gray-900 text-gray-400 border border-gray-800"
+                    }`}
+                  >
+                    {entry.rank}
+                  </span>
+                </div>
+                <div className="col-span-5 flex items-center">
+                  <span className="font-bold text-pixel-gold">
+                    {entry.username}
+                  </span>
+                </div>
+                <div className="col-span-3 text-right flex items-center justify-end">
+                  <span className="font-mono text-gray-300">
+                    {formatScore(entry.score)}
+                  </span>
+                </div>
+                <div className="col-span-3 text-right flex items-center justify-end">
+                  <span className="font-bold text-gray-400">
+                    Lv.{entry.level}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Additional info */}
+        <div className="mt-8 text-center text-sm text-gray-500">
+          <p>Compete with players worldwide and climb the ranks!</p>
+        </div>
+      </div>
+    </section>
+  );
+}