108 lines
4.1 KiB
TypeScript
108 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useSession, signOut } from 'next-auth/react';
|
|
import { useTheme } from '@/contexts/ThemeContext';
|
|
import { useState } from 'react';
|
|
|
|
export function Header() {
|
|
const { theme, toggleTheme } = useTheme();
|
|
const { data: session, status } = useSession();
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<header className="sticky top-0 z-50 border-b border-border bg-card/80 backdrop-blur-sm">
|
|
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4">
|
|
<Link href="/" className="flex items-center gap-2">
|
|
<span className="text-2xl">📊</span>
|
|
<span className="text-xl font-bold text-foreground">SWOT Manager</span>
|
|
</Link>
|
|
|
|
<nav className="flex items-center gap-4">
|
|
{status === 'authenticated' && session?.user && (
|
|
<Link
|
|
href="/sessions"
|
|
className="text-muted transition-colors hover:text-foreground"
|
|
>
|
|
Mes Sessions
|
|
</Link>
|
|
)}
|
|
|
|
<button
|
|
onClick={toggleTheme}
|
|
className="flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-card text-lg transition-colors hover:bg-card-hover"
|
|
aria-label="Toggle theme"
|
|
>
|
|
{theme === 'light' ? '🌙' : '☀️'}
|
|
</button>
|
|
|
|
{status === 'loading' ? (
|
|
<div className="h-9 w-20 animate-pulse rounded-lg bg-card-hover" />
|
|
) : status === 'authenticated' && session?.user ? (
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setMenuOpen(!menuOpen)}
|
|
className="flex h-9 items-center gap-2 rounded-lg border border-border bg-card px-3 transition-colors hover:bg-card-hover"
|
|
>
|
|
<span className="text-sm font-medium text-foreground">
|
|
{session.user.name || session.user.email?.split('@')[0]}
|
|
</span>
|
|
<svg
|
|
className={`h-4 w-4 text-muted transition-transform ${menuOpen ? 'rotate-180' : ''}`}
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M19 9l-7 7-7-7"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
{menuOpen && (
|
|
<>
|
|
<div
|
|
className="fixed inset-0 z-10"
|
|
onClick={() => setMenuOpen(false)}
|
|
/>
|
|
<div className="absolute right-0 z-20 mt-2 w-48 rounded-lg border border-border bg-card py-1 shadow-lg">
|
|
<div className="border-b border-border px-4 py-2">
|
|
<p className="text-xs text-muted">Connecté en tant que</p>
|
|
<p className="truncate text-sm font-medium text-foreground">
|
|
{session.user.email}
|
|
</p>
|
|
</div>
|
|
<Link
|
|
href="/profile"
|
|
onClick={() => setMenuOpen(false)}
|
|
className="block w-full px-4 py-2 text-left text-sm text-foreground hover:bg-card-hover"
|
|
>
|
|
👤 Mon Profil
|
|
</Link>
|
|
<button
|
|
onClick={() => signOut({ callbackUrl: '/' })}
|
|
className="w-full px-4 py-2 text-left text-sm text-destructive hover:bg-card-hover"
|
|
>
|
|
Se déconnecter
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<Link
|
|
href="/login"
|
|
className="flex h-9 items-center rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary-hover"
|
|
>
|
|
Connexion
|
|
</Link>
|
|
)}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|