119 lines
4.7 KiB
TypeScript
119 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import DarkThemeLayout from "../components/DarkThemeLayout";
|
|
import Navbar from "../components/Navbar";
|
|
import LeaderboardTable from "../components/LeaderboardTable";
|
|
|
|
interface User {
|
|
username: string;
|
|
points: number;
|
|
}
|
|
|
|
export default function LeaderboardPage() {
|
|
const router = useRouter();
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const token = localStorage.getItem("token");
|
|
if (!token) {
|
|
router.push("/login");
|
|
return;
|
|
}
|
|
|
|
fetchUserData();
|
|
}, [router]);
|
|
|
|
const fetchUserData = async () => {
|
|
try {
|
|
const token = localStorage.getItem("token");
|
|
const response = await fetch("/api/users/me", {
|
|
headers: { Authorization: `Bearer ${token}` },
|
|
});
|
|
if (!response.ok) {
|
|
throw new Error("Failed to fetch user data");
|
|
}
|
|
const data = await response.json();
|
|
if (data.success && data.data) {
|
|
setUser({
|
|
username: data.data.name,
|
|
points: data.data.pointsBalance || 0,
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching user data:", error);
|
|
localStorage.removeItem("token");
|
|
router.push("/login");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<DarkThemeLayout>
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<div className="animate-spin rounded-full h-16 w-16 border-b-2 border-yellow-500"></div>
|
|
</div>
|
|
</DarkThemeLayout>
|
|
);
|
|
}
|
|
|
|
if (!user) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Navbar user={user} />
|
|
<DarkThemeLayout>
|
|
<div className="space-y-8">
|
|
<div className="text-center">
|
|
<div className="inline-flex items-center justify-center gap-3 mb-4">
|
|
<div className="w-16 h-16 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center shadow-2xl shadow-yellow-500/50">
|
|
<svg className="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<h1 className="text-4xl font-bold text-white mb-2">Leaderboard</h1>
|
|
<p className="text-gray-400 text-lg">
|
|
See where you rank among the top players
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-gray-800/50 border border-yellow-500/30 rounded-xl p-6">
|
|
<div className="flex items-center justify-center gap-4 flex-wrap">
|
|
<div className="flex items-center gap-2">
|
|
<svg className="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
|
</svg>
|
|
<span className="text-gray-300">Complete tasks to climb the ranks</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<svg className="w-5 h-5 text-orange-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clipRule="evenodd" />
|
|
</svg>
|
|
<span className="text-gray-300">Build your streak for bonus points</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<LeaderboardTable />
|
|
|
|
<div className="flex justify-center gap-4">
|
|
<a
|
|
href="/tasks"
|
|
className="bg-gradient-to-r from-yellow-500 to-orange-500 text-white font-semibold px-8 py-3 rounded-lg hover:from-yellow-600 hover:to-orange-600 transition transform hover:scale-105"
|
|
>
|
|
Complete Tasks to Rank Up
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</DarkThemeLayout>
|
|
</>
|
|
);
|
|
}
|