117 lines
3.7 KiB
TypeScript
117 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useSession, signOut } from "next-auth/react";
|
|
import PlayerStats from "./PlayerStats";
|
|
|
|
interface UserData {
|
|
username: string;
|
|
avatar: string | null;
|
|
hp: number;
|
|
maxHp: number;
|
|
xp: number;
|
|
maxXp: number;
|
|
level: number;
|
|
}
|
|
|
|
interface NavigationProps {
|
|
initialUserData?: UserData | null;
|
|
initialIsAdmin?: boolean;
|
|
}
|
|
|
|
export default function Navigation({
|
|
initialUserData,
|
|
initialIsAdmin,
|
|
}: NavigationProps) {
|
|
const { data: session } = useSession();
|
|
|
|
// Utiliser initialUserData pour déterminer l'état de connexion pendant l'hydratation
|
|
// Cela évite le clignottement au reload
|
|
const isAuthenticated = initialUserData !== null || session !== null;
|
|
const isAdmin = initialIsAdmin ?? session?.user?.role === "ADMIN";
|
|
|
|
return (
|
|
<nav className="w-full fixed top-0 left-0 z-50 px-8 py-3 bg-black/80 backdrop-blur-sm border-b border-gray-800/30">
|
|
<div className="max-w-7xl mx-auto flex items-center justify-between">
|
|
{/* Logo - Left */}
|
|
<div className="flex flex-col">
|
|
<div className="text-white text-xl font-gaming font-bold tracking-tight">
|
|
GAME.OF.TECH
|
|
</div>
|
|
<div className="text-pixel-gold text-xs font-gaming-subtitle font-semibold flex items-center gap-1 tracking-wide">
|
|
<span>✦</span>
|
|
<span>Peaksys</span>
|
|
<span>✦</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Navigation Links - Center */}
|
|
<div className="flex items-center gap-6">
|
|
<Link
|
|
href="/"
|
|
className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
|
|
>
|
|
HOME
|
|
</Link>
|
|
<Link
|
|
href="/events"
|
|
className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
|
|
>
|
|
EVENTS
|
|
</Link>
|
|
<Link
|
|
href="/leaderboard"
|
|
className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
|
|
>
|
|
LEADERBOARD
|
|
</Link>
|
|
{isAdmin && (
|
|
<Link
|
|
href="/admin"
|
|
className="text-pixel-gold hover:text-orange-400 transition text-xs font-normal uppercase tracking-widest"
|
|
>
|
|
ADMIN
|
|
</Link>
|
|
)}
|
|
</div>
|
|
|
|
{/* Right Side */}
|
|
<div className="flex items-center gap-4">
|
|
{isAuthenticated ? (
|
|
<>
|
|
<PlayerStats initialUserData={initialUserData} />
|
|
<Link
|
|
href="/profile"
|
|
className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
|
|
>
|
|
PROFIL
|
|
</Link>
|
|
<button
|
|
onClick={() => signOut()}
|
|
className="text-gray-400 hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
|
|
>
|
|
Déconnexion
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link
|
|
href="/login"
|
|
className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
|
|
>
|
|
Connexion
|
|
</Link>
|
|
<Link
|
|
href="/register"
|
|
className="px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition"
|
|
>
|
|
Inscription
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|