48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useAuth } from "./AuthProvider";
|
|
import { Button } from "./ui/button";
|
|
import { Badge } from "./ui/badge";
|
|
|
|
export function Navbar() {
|
|
const { user, loading, logout } = useAuth();
|
|
|
|
return (
|
|
<nav className="border-b border-slate-800/50 bg-slate-950/50 backdrop-blur-sm sticky top-0 z-50">
|
|
<div className="container mx-auto px-4 h-12 flex items-center justify-between max-w-5xl">
|
|
<a href="/" className="flex items-center gap-2 font-mono text-sm text-cyan-300 hover:text-cyan-200 transition-colors no-underline">
|
|
<span>🤡</span>
|
|
<span className="font-bold tracking-wider uppercase hidden sm:inline">BaraBingo</span>
|
|
</a>
|
|
|
|
{!loading && (
|
|
<div className="flex items-center gap-3">
|
|
{user ? (
|
|
<>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs font-mono text-slate-400">{user.nickname}</span>
|
|
{user.isAdmin && (
|
|
<Badge variant="default" className="text-[8px] px-1.5 py-0 uppercase">Admin</Badge>
|
|
)}
|
|
</div>
|
|
{user.isAdmin && (
|
|
<a href="/admin">
|
|
<Button variant="ghost" size="sm" className="text-xs font-mono h-7">⚙</Button>
|
|
</a>
|
|
)}
|
|
<Button variant="ghost" size="sm" className="text-xs font-mono text-slate-600 h-7" onClick={logout}>
|
|
EXIT
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<a href="/">
|
|
<Button variant="outline" size="sm" className="text-xs font-mono h-7">LOGIN</Button>
|
|
</a>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|