julienfroidefond/got-gaming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Init

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-08 17:13:14 +01:00
commit 4e6ce54e0f
23 changed files with 2131 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
components/LeaderboardSection.tsx Normal file
View File

@@ -0,0 +1,156 @@
"use client";
interface LeaderboardEntry {
rank: number;
username: string;
score: number;
level: number;
avatar?: string;
}
// 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: "TechMaster2024", score: 125000, level: 85 },
{ rank: 2, username: "CodeWarrior", score: 118500, level: 82 },
{ rank: 3, username: "AIGenius", score: 112000, level: 80 },
{ rank: 4, username: "DevLegend", score: 105500, level: 78 },
{ rank: 5, username: "InnovationPro", score: 99000, level: 75 },
{ rank: 6, username: "TechNinja", score: 92500, level: 73 },
{ rank: 7, username: "DigitalHero", score: 87000, level: 71 },
{ rank: 8, username: "CodeCrusher", score: 81500, level: 69 },
{ rank: 9, username: "TechWizard", score: 76000, level: 67 },
{ rank: 10, username: "InnovationKing", score: 70500, level: 65 },
{ rank: 11, username: "DevMaster", score: 68000, level: 64 },
{ rank: 12, username: "TechElite", score: 65500, level: 63 },
{ rank: 13, username: "CodeChampion", score: 63000, level: 62 },
{ rank: 14, username: "AIVisionary", score: 60500, level: 61 },
{ rank: 15, username: "TechPioneer", score: 58000, level: 60 },
];
export default function LeaderboardSection() {
return (
<section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24 pb-16">
{/* Background Image */}
<div
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: `url('/leaderboard-bg.jpg')`,
}}
>
{/* Dark overlay for readability */}
<div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
</div>
{/* Content */}
<div className="relative z-10 w-full max-w-6xl mx-auto px-8 py-16">
{/* Title Section */}
<div className="text-center mb-12">
<h1 className="text-5xl md:text-7xl font-gaming font-black mb-4 tracking-tight">
<span
className="bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent"
style={{
textShadow: "0 0 30px rgba(218, 165, 32, 0.5)",
}}
>
LEADERBOARD
</span>
</h1>
<div className="text-pixel-gold text-lg md:text-xl font-gaming-subtitle font-semibold flex items-center justify-center gap-2 tracking-wide">
<span>✦</span>
<span>Top Players</span>
<span>✦</span>
</div>
</div>
{/* Leaderboard Table */}
<div className="bg-black/60 border border-pixel-gold/30 rounded-lg overflow-hidden backdrop-blur-sm">
{/* Header */}
<div className="bg-gray-900/80 border-b border-pixel-gold/30 grid grid-cols-12 gap-4 p-4 font-bold text-xs uppercase tracking-widest text-gray-300">
<div className="col-span-1 text-center">Rank</div>
<div className="col-span-6">Player</div>
<div className="col-span-3 text-right">Score</div>
<div className="col-span-2 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-gradient-to-r from-pixel-gold/10 via-pixel-gold/5 to-transparent"
: "bg-black/40"
}`}
>
{/* Rank */}
<div className="col-span-1 flex items-center justify-center">
<span
className={`inline-flex items-center justify-center w-10 h-10 rounded-full font-bold text-sm ${
entry.rank === 1
? "bg-gradient-to-br from-pixel-gold to-orange-500 text-black shadow-lg shadow-pixel-gold/50"
: entry.rank === 2
? "bg-gradient-to-br from-gray-400 to-gray-500 text-black"
: entry.rank === 3
? "bg-gradient-to-br from-orange-700 to-orange-800 text-white"
: "bg-gray-900 text-gray-400 border border-gray-800"
}`}
>
{entry.rank}
</span>
</div>
{/* Player */}
<div className="col-span-6 flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 border border-pixel-gold/30 flex items-center justify-center">
<span className="text-pixel-gold text-xs font-bold">
{entry.username.charAt(0).toUpperCase()}
</span>
</div>
<span
className={`font-bold ${
entry.rank <= 3 ? "text-pixel-gold" : "text-white"
}`}
>
{entry.username}
</span>
{entry.rank <= 3 && (
<span className="text-pixel-gold text-xs">✦</span>
)}
</div>
{/* Score */}
<div className="col-span-3 flex items-center justify-end">
<span className="font-mono text-gray-300">
{formatScore(entry.score)}
</span>
</div>
{/* Level */}
<div className="col-span-2 flex items-center justify-end">
<span className="font-bold text-gray-400">
Lv.{entry.level}
</span>
</div>
</div>
))}
</div>
</div>
{/* Footer Info */}
<div className="mt-8 text-center">
<p className="text-gray-500 text-sm">
Compete with players worldwide and climb the ranks!
</p>
<p className="text-gray-600 text-xs mt-2">
Rankings update every hour
</p>
</div>
</div>
</section>
);
}