349 lines
18 KiB
TypeScript
349 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Menu, X, Trophy, ArrowBigUp } from "lucide-react";
|
|
import LevelingEditor from "@/components/LevelingEditor";
|
|
import type { Guild, LeaderboardMember } from "@/lib/discord";
|
|
|
|
type TabType = "leaderboard" | "leveling";
|
|
|
|
interface DashboardContentProps {
|
|
currentGuild: Guild;
|
|
leaderboardData: LeaderboardMember[];
|
|
currentUserRank?: LeaderboardMember;
|
|
currentUserId?: string;
|
|
}
|
|
|
|
export default function DashboardContent({
|
|
currentGuild,
|
|
leaderboardData,
|
|
currentUserRank,
|
|
currentUserId,
|
|
}: DashboardContentProps) {
|
|
const [activeTab, setActiveTab] = useState<TabType>("leaderboard");
|
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
|
|
const menuItems = [
|
|
{ id: "leaderboard" as TabType, label: "Leaderboard", icon: Trophy },
|
|
{ id: "leveling" as TabType, label: "Leveling", icon: ArrowBigUp },
|
|
];
|
|
|
|
const handleTabChange = (tab: TabType) => {
|
|
setActiveTab(tab);
|
|
setSidebarOpen(false);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-1 pt-16 sm:pt-20 h-screen overflow-hidden">
|
|
{/* Mobile Menu Button */}
|
|
<button
|
|
onClick={() => setSidebarOpen(!sidebarOpen)}
|
|
className="fixed bottom-4 right-4 z-50 lg:hidden p-3 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg transition-all"
|
|
>
|
|
{sidebarOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
|
</button>
|
|
|
|
{/* Mobile Sidebar Overlay */}
|
|
{sidebarOpen && (
|
|
<div
|
|
className="fixed inset-0 bg-black/60 z-40 lg:hidden backdrop-blur-sm"
|
|
onClick={() => setSidebarOpen(false)}
|
|
/>
|
|
)}
|
|
|
|
{/* Sidebar */}
|
|
<div
|
|
className={`fixed lg:relative inset-y-0 left-0 z-40 w-64 flex-shrink-0 bg-black/90 lg:bg-black/20 border-r border-white/10 overflow-y-auto backdrop-blur-md lg:backdrop-blur-sm transform transition-transform duration-300 ease-in-out ${sidebarOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
|
|
}`}
|
|
>
|
|
<div className="p-4 space-y-2 pt-20 lg:pt-4">
|
|
{menuItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = activeTab === item.id;
|
|
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => handleTabChange(item.id)}
|
|
className={`w-full text-left px-4 py-3 rounded-lg font-medium transition-all flex items-center gap-3 ${isActive
|
|
? "bg-blue-600/20 text-blue-400 border border-blue-600/30"
|
|
: "text-gray-400 hover:text-white hover:bg-white/5 border border-transparent"
|
|
}`}
|
|
>
|
|
<Icon className="w-5 h-5" />
|
|
{item.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Area */}
|
|
<div className="flex-1 overflow-y-auto bg-transparent p-4 sm:p-6 lg:p-8">
|
|
<div className="max-w-5xl mx-auto">
|
|
{activeTab === "leaderboard" && (
|
|
<LeaderboardView
|
|
leaderboardData={leaderboardData}
|
|
currentUserRank={currentUserRank}
|
|
currentUserId={currentUserId}
|
|
/>
|
|
)}
|
|
|
|
{activeTab === "leveling" && (
|
|
<LevelingEditor guildId={currentGuild.id} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface LeaderboardViewProps {
|
|
leaderboardData: LeaderboardMember[];
|
|
currentUserRank?: LeaderboardMember;
|
|
currentUserId?: string;
|
|
}
|
|
|
|
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>
|
|
</>
|
|
);
|
|
}
|