|
| 1 | +"use client"; |
| 2 | + |
| 3 | +import { useEffect, useState } from "react"; |
| 4 | +import { ShootingStars } from "@/components/shooting-stars"; |
| 5 | +import { SparklesCore } from "@/components/sparkles"; |
| 6 | +import { StarsBackground } from "@/components/stars-background"; |
| 7 | + |
| 8 | +export default function Leaderboard() { |
| 9 | + const [data, setData] = useState([]); |
| 10 | + |
| 11 | + useEffect(() => { |
| 12 | + setData([ |
| 13 | + { name: "Alice", points: 120 }, |
| 14 | + { name: "Bob", points: 110 }, |
| 15 | + { name: "Charlie", points: 95 }, |
| 16 | + ]); |
| 17 | + }, []); |
| 18 | + |
| 19 | + return ( |
| 20 | + <div className="relative min-h-screen bg-[#0a0a23] overflow-hidden text-white"> |
| 21 | + {/* ✅ Galaxy Background Effects */} |
| 22 | + <div className="absolute inset-0 z-0"> |
| 23 | + <StarsBackground /> |
| 24 | + <ShootingStars /> |
| 25 | + <StarsBackground /> |
| 26 | + <ShootingStars /> |
| 27 | + <StarsBackground /> |
| 28 | + <ShootingStars /> |
| 29 | + <StarsBackground /> |
| 30 | + <ShootingStars /> |
| 31 | + <StarsBackground /> |
| 32 | + <ShootingStars /> |
| 33 | + |
| 34 | + <div className="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-[#0a0a23]" /> |
| 35 | + </div> |
| 36 | + |
| 37 | + {/* ✅ Leaderboard Content */} |
| 38 | + <div className="relative z-10 max-w-4xl mx-auto px-4 py-24"> |
| 39 | + <h1 className="text-5xl font-bold text-center mb-12"> |
| 40 | + 🏆 GSSoC '25 Leaderboard |
| 41 | + </h1> |
| 42 | + |
| 43 | + <div className="bg-[#111132] bg-opacity-90 backdrop-blur-md p-8 rounded-3xl shadow-2xl border border-white/10"> |
| 44 | + {data.map((user, index) => ( |
| 45 | + <div |
| 46 | + key={index} |
| 47 | + className="flex justify-between items-center p-4 my-4 rounded-xl bg-[#1f1f3c] hover:bg-[#2a2a4c] transition-all duration-300 shadow" |
| 48 | + > |
| 49 | + <span className="text-xl font-semibold"> |
| 50 | + {index + 1}. {user.name} |
| 51 | + </span> |
| 52 | + <span className="text-lg">{user.points} pts</span> |
| 53 | + </div> |
| 54 | + ))} |
| 55 | + </div> |
| 56 | + </div> |
| 57 | + </div> |
| 58 | + ); |
| 59 | +} |
0 commit comments