251 lines
15 KiB
TypeScript
251 lines
15 KiB
TypeScript
import type { LeaderboardMember } from "@/lib/discord";
|
|
|
|
interface LeaderboardViewProps {
|
|
leaderboardData: LeaderboardMember[];
|
|
currentUserRank?: LeaderboardMember;
|
|
currentUserId?: string;
|
|
}
|
|
|
|
export default function LeaderboardView({
|
|
leaderboardData,
|
|
currentUserRank,
|
|
currentUserId,
|
|
}: LeaderboardViewProps) {
|
|
return (
|
|
<>
|
|
<div className="mb-6 sm:mb-8">
|
|
<h2 className="text-2xl sm:text-3xl font-bold text-white mb-4 sm:mb-6">
|
|
Leaderboard
|
|
</h2>
|
|
{currentUserRank && (
|
|
<div className="bg-white/5 border border-white/10 rounded-xl sm:rounded-2xl p-4 sm:p-6 flex flex-col md:flex-row items-center justify-between backdrop-blur-md shadow-2xl relative overflow-hidden group">
|
|
{/* Background Glow */}
|
|
<div className="absolute top-0 right-0 w-64 h-64 bg-blue-500/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 group-hover:bg-blue-500/10 transition-all duration-700"></div>
|
|
|
|
<div className="flex items-center gap-4 sm:gap-6 relative z-10 mb-4 md:mb-0">
|
|
{currentUserRank.avatar ? (
|
|
<img
|
|
src={currentUserRank.avatar}
|
|
alt={currentUserRank.username}
|
|
className="w-16 h-16 sm:w-20 sm:h-20 rounded-full border-4 border-white/10 shadow-lg"
|
|
/>
|
|
) : (
|
|
<div className="w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-gray-700 flex items-center justify-center text-white font-bold text-2xl sm:text-3xl border-4 border-white/10 shadow-lg">
|
|
{currentUserRank.username.charAt(0).toUpperCase()}
|
|
</div>
|
|
)}
|
|
<div className="flex flex-col">
|
|
<span className="text-xl sm:text-2xl font-bold text-white">
|
|
{currentUserRank.username}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex bg-black/20 rounded-xl p-3 sm:p-4 gap-4 sm:gap-8 md:gap-16 border border-white/5 relative z-10 w-full md:w-auto justify-center">
|
|
<div className="text-center">
|
|
<p className="text-gray-400 text-[10px] sm:text-xs uppercase font-bold tracking-wider mb-1">
|
|
Rank
|
|
</p>
|
|
<p className="text-2xl sm:text-3xl font-black text-white">
|
|
#{currentUserRank.rank}
|
|
</p>
|
|
</div>
|
|
<div className="w-px bg-white/10"></div>
|
|
<div className="text-center">
|
|
<p className="text-gray-400 text-[10px] sm:text-xs uppercase font-bold tracking-wider mb-1">
|
|
Level
|
|
</p>
|
|
<p className="text-2xl sm:text-3xl font-black text-yellow-500">
|
|
{currentUserRank.level}
|
|
</p>
|
|
</div>
|
|
<div className="w-px bg-white/10"></div>
|
|
<div className="text-center">
|
|
<p className="text-gray-400 text-[10px] sm:text-xs uppercase font-bold tracking-wider mb-1">
|
|
Total XP
|
|
</p>
|
|
<p className="text-2xl sm:text-3xl font-black text-blue-400">
|
|
{currentUserRank.xp.toLocaleString()}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="bg-white/5 backdrop-blur-md border border-white/10 rounded-xl sm:rounded-2xl overflow-hidden shadow-xl">
|
|
{/* Mobile Card View */}
|
|
<div className="block sm:hidden">
|
|
{leaderboardData.length > 0 ? (
|
|
<div className="divide-y divide-white/5">
|
|
{leaderboardData.map((member) => {
|
|
const isCurrentUser = member.user_id === currentUserId;
|
|
let rankColor = "text-blue-400";
|
|
if (member.rank === 1)
|
|
rankColor = "text-yellow-400";
|
|
if (member.rank === 2)
|
|
rankColor = "text-gray-300";
|
|
if (member.rank === 3)
|
|
rankColor = "text-orange-400";
|
|
|
|
return (
|
|
<div
|
|
key={member.user_id}
|
|
className={`p-4 ${isCurrentUser
|
|
? "bg-blue-600/20"
|
|
: ""
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<span
|
|
className={`font-mono font-bold text-lg w-10 ${rankColor}`}
|
|
>
|
|
#{member.rank}
|
|
</span>
|
|
{member.avatar ? (
|
|
<img
|
|
src={member.avatar}
|
|
alt=""
|
|
className="w-10 h-10 rounded-full bg-gray-700 shadow-md"
|
|
/>
|
|
) : (
|
|
<div className="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white font-bold">
|
|
{member.username
|
|
.charAt(0)
|
|
.toUpperCase()}
|
|
</div>
|
|
)}
|
|
<div className="flex-1 min-w-0">
|
|
<p
|
|
className={`font-semibold truncate ${isCurrentUser
|
|
? "text-blue-200"
|
|
: "text-white"
|
|
}`}
|
|
>
|
|
{member.username}
|
|
</p>
|
|
{isCurrentUser && (
|
|
<span className="text-xs text-blue-400">
|
|
You
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="text-right">
|
|
<p className="font-bold text-yellow-500">
|
|
Lv. {member.level}
|
|
</p>
|
|
<p className="text-xs text-gray-500 font-mono">
|
|
{member.xp.toLocaleString()} XP
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="p-12 text-center text-gray-500">
|
|
Setup leveling system to see the leaderboard
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Desktop Table View */}
|
|
<div className="hidden sm:block overflow-x-auto">
|
|
<table className="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr className="border-b border-white/10 text-gray-400 text-sm uppercase tracking-wider bg-white/5">
|
|
<th className="p-4 pl-6">Rank</th>
|
|
<th className="p-4">User</th>
|
|
<th className="p-4 text-right">Level</th>
|
|
<th className="p-4 pr-6 text-right">XP</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="text-gray-300">
|
|
{leaderboardData.length > 0 ? (
|
|
leaderboardData.map((member) => {
|
|
const isCurrentUser =
|
|
member.user_id === currentUserId;
|
|
let rankColor = "text-blue-400";
|
|
if (member.rank === 1)
|
|
rankColor =
|
|
"text-yellow-400 drop-shadow-[0_0_10px_rgba(250,204,21,0.5)]";
|
|
if (member.rank === 2)
|
|
rankColor =
|
|
"text-gray-300 drop-shadow-[0_0_10px_rgba(209,213,219,0.5)]";
|
|
if (member.rank === 3)
|
|
rankColor =
|
|
"text-orange-400 drop-shadow-[0_0_10px_rgba(251,146,60,0.5)]";
|
|
|
|
return (
|
|
<tr
|
|
key={member.user_id}
|
|
className={`border-b border-white/5 transition-all ${isCurrentUser
|
|
? "bg-blue-600/20 hover:bg-blue-600/30"
|
|
: "hover:bg-white/5"
|
|
}`}
|
|
>
|
|
<td
|
|
className={`p-4 pl-6 font-mono font-bold text-lg ${rankColor}`}
|
|
>
|
|
#{member.rank}
|
|
</td>
|
|
<td className="p-4">
|
|
<div className="flex items-center gap-4">
|
|
{member.avatar ? (
|
|
<img
|
|
src={member.avatar}
|
|
alt=""
|
|
className="w-10 h-10 rounded-full bg-gray-700 shadow-md"
|
|
/>
|
|
) : (
|
|
<div className="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white font-bold text-lg">
|
|
{member.username
|
|
.charAt(0)
|
|
.toUpperCase()}
|
|
</div>
|
|
)}
|
|
<div className="flex flex-col">
|
|
<span
|
|
className={`font-semibold text-lg ${isCurrentUser
|
|
? "text-blue-200"
|
|
: "text-white"
|
|
}`}
|
|
>
|
|
{member.username}
|
|
</span>
|
|
{isCurrentUser && (
|
|
<span className="text-xs text-blue-400 font-medium">
|
|
You
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="p-4 text-right font-bold text-yellow-500 text-lg">
|
|
{member.level}
|
|
</td>
|
|
<td className="p-4 pr-6 text-right text-gray-500 font-mono">
|
|
{member.xp.toLocaleString()}
|
|
</td>
|
|
</tr>
|
|
);
|
|
})
|
|
) : (
|
|
<tr>
|
|
<td
|
|
colSpan={4}
|
|
className="p-12 text-center text-gray-500 text-lg"
|
|
>
|
|
Setup leveling system to see the leaderboard
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|