179 lines
9.5 KiB
TypeScript
179 lines
9.5 KiB
TypeScript
|
|
import React, { useEffect, useState } from 'react';
|
|
import { StorageService } from '../services/storageService';
|
|
import { UserProfile } from '../types';
|
|
import { Trophy, Medal, User, GraduationCap, Briefcase, BookOpen, Crown, Loader2 } from 'lucide-react';
|
|
import { useLanguage } from '../contexts/LanguageContext';
|
|
|
|
const Leaderboard: React.FC = () => {
|
|
const { t } = useLanguage();
|
|
const [leaders, setLeaders] = useState<UserProfile[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [currentUser, setCurrentUser] = useState<UserProfile | null>(null);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
setLoading(true);
|
|
const [allUsers, profile] = await Promise.all([
|
|
StorageService.getLeaderboard(50),
|
|
StorageService.getProfile()
|
|
]);
|
|
setLeaders(allUsers);
|
|
setCurrentUser(profile);
|
|
setLoading(false);
|
|
};
|
|
fetchData();
|
|
}, []);
|
|
|
|
const getRankStyle = (index: number) => {
|
|
switch(index) {
|
|
case 0: return "bg-yellow-100 border-yellow-300 text-yellow-800 dark:bg-yellow-900/30 dark:border-yellow-700 dark:text-yellow-400"; // Gold
|
|
case 1: return "bg-gray-100 border-gray-300 text-gray-800 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300"; // Silver
|
|
case 2: return "bg-orange-100 border-orange-300 text-orange-800 dark:bg-orange-900/30 dark:border-orange-700 dark:text-orange-400"; // Bronze
|
|
default: return "bg-white dark:bg-gray-800 border-gray-100 dark:border-gray-700 text-gray-700 dark:text-gray-200";
|
|
}
|
|
};
|
|
|
|
const getRoleIcon = (role: string) => {
|
|
switch(role) {
|
|
case 'student': return <GraduationCap size={14} />;
|
|
case 'teacher': return <BookOpen size={14} />;
|
|
default: return <Briefcase size={14} />;
|
|
}
|
|
};
|
|
|
|
if (loading) return (
|
|
<div className="flex justify-center items-center h-[60vh]">
|
|
<Loader2 className="animate-spin text-yellow-500 w-12 h-12" />
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-8 pb-20">
|
|
<header className="text-center md:text-left">
|
|
<h1 className="text-3xl font-black text-gray-900 dark:text-white flex items-center justify-center md:justify-start gap-3">
|
|
<Trophy className="text-yellow-500 fill-yellow-400" size={32} /> {t("Leaderboard", "Leaderboard")}
|
|
</h1>
|
|
<p className="text-gray-500 dark:text-gray-400 mt-2">{t("Top achievers in the Rudraksha community.", "Top achievers in the Rudraksha community.")}</p>
|
|
</header>
|
|
|
|
{/* Podium Section (Top 3) */}
|
|
{leaders.length >= 3 && (
|
|
<div className="flex flex-wrap justify-center items-end gap-4 md:gap-8 mb-12 pt-8">
|
|
{/* 2nd Place */}
|
|
<div className="flex flex-col items-center animate-in slide-in-from-bottom-8 duration-700 delay-100 order-1 md:order-none">
|
|
<div className="relative">
|
|
<img
|
|
src={leaders[1].avatarUrl || `https://api.dicebear.com/7.x/initials/svg?seed=${leaders[1].name}`}
|
|
alt={leaders[1].name}
|
|
className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-gray-300 shadow-xl object-cover"
|
|
/>
|
|
<div className="absolute -bottom-3 left-1/2 -translate-x-1/2 bg-gray-300 text-gray-800 font-bold px-3 py-1 rounded-full text-sm shadow-md border-2 border-white">2nd</div>
|
|
</div>
|
|
<div className="mt-4 text-center">
|
|
<h3 className="font-bold text-gray-900 dark:text-white text-lg truncate w-32">{leaders[1].name}</h3>
|
|
<p className="text-gray-500 text-xs font-medium uppercase tracking-wider">{leaders[1].points} pts</p>
|
|
</div>
|
|
<div className="h-24 w-24 md:w-32 bg-gradient-to-t from-gray-200 to-gray-100 dark:from-gray-800 dark:to-gray-700 rounded-t-lg mt-2 opacity-50"></div>
|
|
</div>
|
|
|
|
{/* 1st Place */}
|
|
<div className="flex flex-col items-center animate-in slide-in-from-bottom-8 duration-700 -mt-8 order-2 md:order-none z-10">
|
|
<div className="relative">
|
|
<Crown className="absolute -top-8 left-1/2 -translate-x-1/2 text-yellow-500 fill-yellow-400 animate-bounce" size={32} />
|
|
<img
|
|
src={leaders[0].avatarUrl || `https://api.dicebear.com/7.x/initials/svg?seed=${leaders[0].name}`}
|
|
alt={leaders[0].name}
|
|
className="w-24 h-24 md:w-32 md:h-32 rounded-full border-4 border-yellow-400 shadow-2xl object-cover ring-4 ring-yellow-400/30"
|
|
/>
|
|
<div className="absolute -bottom-4 left-1/2 -translate-x-1/2 bg-yellow-400 text-yellow-900 font-black px-4 py-1 rounded-full text-base shadow-lg border-2 border-white">1st</div>
|
|
</div>
|
|
<div className="mt-5 text-center">
|
|
<h3 className="font-bold text-gray-900 dark:text-white text-xl truncate w-40">{leaders[0].name}</h3>
|
|
<p className="text-yellow-600 dark:text-yellow-400 font-bold uppercase tracking-wider">{leaders[0].points} pts</p>
|
|
</div>
|
|
<div className="h-32 w-28 md:w-40 bg-gradient-to-t from-yellow-100 to-yellow-50 dark:from-yellow-900/30 dark:to-yellow-800/10 rounded-t-lg mt-2 opacity-60"></div>
|
|
</div>
|
|
|
|
{/* 3rd Place */}
|
|
<div className="flex flex-col items-center animate-in slide-in-from-bottom-8 duration-700 delay-200 order-3 md:order-none">
|
|
<div className="relative">
|
|
<img
|
|
src={leaders[2].avatarUrl || `https://api.dicebear.com/7.x/initials/svg?seed=${leaders[2].name}`}
|
|
alt={leaders[2].name}
|
|
className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-orange-300 shadow-xl object-cover"
|
|
/>
|
|
<div className="absolute -bottom-3 left-1/2 -translate-x-1/2 bg-orange-300 text-orange-900 font-bold px-3 py-1 rounded-full text-sm shadow-md border-2 border-white">3rd</div>
|
|
</div>
|
|
<div className="mt-4 text-center">
|
|
<h3 className="font-bold text-gray-900 dark:text-white text-lg truncate w-32">{leaders[2].name}</h3>
|
|
<p className="text-gray-500 text-xs font-medium uppercase tracking-wider">{leaders[2].points} pts</p>
|
|
</div>
|
|
<div className="h-16 w-24 md:w-32 bg-gradient-to-t from-orange-100 to-orange-50 dark:from-orange-900/30 dark:to-orange-800/10 rounded-t-lg mt-2 opacity-50"></div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* List Section */}
|
|
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left">
|
|
<thead className="bg-gray-50 dark:bg-gray-900/50 text-gray-500 dark:text-gray-400 text-xs uppercase font-bold tracking-wider">
|
|
<tr>
|
|
<th className="p-4 w-16 text-center">Rank</th>
|
|
<th className="p-4">User</th>
|
|
<th className="p-4 hidden sm:table-cell">Role</th>
|
|
<th className="p-4 text-right">Karma Points</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-100 dark:divide-gray-700">
|
|
{leaders.map((user, index) => {
|
|
const isMe = currentUser?.id === user.id;
|
|
return (
|
|
<tr
|
|
key={user.id}
|
|
className={`transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/50 ${isMe ? 'bg-blue-50 dark:bg-blue-900/20' : ''} ${index < 3 ? 'font-medium' : ''}`}
|
|
>
|
|
<td className="p-4 text-center">
|
|
<span className={`inline-flex items-center justify-center w-8 h-8 rounded-full text-sm font-bold ${index < 3 ? getRankStyle(index) : 'text-gray-500'}`}>
|
|
{index + 1}
|
|
</span>
|
|
</td>
|
|
<td className="p-4">
|
|
<div className="flex items-center gap-3">
|
|
<img
|
|
src={user.avatarUrl || `https://api.dicebear.com/7.x/initials/svg?seed=${user.name}`}
|
|
className="w-10 h-10 rounded-full bg-gray-200 object-cover border border-gray-100 dark:border-gray-600"
|
|
alt={user.name}
|
|
/>
|
|
<div>
|
|
<p className={`font-bold text-sm ${isMe ? 'text-blue-600 dark:text-blue-400' : 'text-gray-900 dark:text-white'}`}>
|
|
{user.name} {isMe && "(You)"}
|
|
</p>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400 sm:hidden capitalize">
|
|
{user.role}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="p-4 hidden sm:table-cell">
|
|
<span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 capitalize border border-gray-200 dark:border-gray-600">
|
|
{getRoleIcon(user.role)} {user.role}
|
|
</span>
|
|
</td>
|
|
<td className="p-4 text-right">
|
|
<span className="font-mono font-bold text-gray-900 dark:text-white">{user.points.toLocaleString()}</span>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Leaderboard;
|