83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
// components/TopNav.tsx
|
|
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useAuth } from "@/context/AuthContext";
|
|
|
|
export function TopNav() {
|
|
const { user, logout, loading } = useAuth();
|
|
|
|
const isAuthenticated = !!user;
|
|
|
|
return (
|
|
<header className="border-b border-zinc-800 bg-black/95 backdrop-blur">
|
|
|
|
{/* Main nav row */}
|
|
<div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
|
|
{/* Left: Brand / Home */}
|
|
<Link
|
|
href="/"
|
|
className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-400"
|
|
>
|
|
Battl Builder
|
|
</Link>
|
|
|
|
{/* Right side actions */}
|
|
<div className="flex items-center gap-3">
|
|
{/* Search placeholder */}
|
|
<button
|
|
type="button"
|
|
className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-zinc-700 bg-zinc-900/60 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800 hover:border-zinc-500 transition-colors"
|
|
aria-label="Search (coming soon)"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="h-4 w-4"
|
|
>
|
|
<circle cx="11" cy="11" r="6" />
|
|
<line x1="16.5" y1="16.5" x2="21" y2="21" />
|
|
</svg>
|
|
</button>
|
|
|
|
{loading ? (
|
|
<span className="text-xs text-zinc-500">Checking session…</span>
|
|
) : isAuthenticated ? (
|
|
<>
|
|
<span className="hidden text-xs text-zinc-300 sm:inline">
|
|
{user.displayName || user.email}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={logout}
|
|
className="text-xs font-medium text-zinc-400 hover:text-zinc-100 transition-colors"
|
|
>
|
|
Log Out
|
|
</button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link
|
|
href="/login"
|
|
className="text-xs font-medium text-zinc-400 hover:text-zinc-100 transition-colors"
|
|
>
|
|
Log In
|
|
</Link>
|
|
<Link
|
|
href="/register"
|
|
className="rounded-md border border-amber-400/70 bg-amber-400/10 px-3 py-1.5 text-xs font-semibold text-amber-200 hover:bg-amber-400/20 transition-colors"
|
|
>
|
|
Join Beta
|
|
</Link>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
} |