119 lines
4.1 KiB
TypeScript
119 lines
4.1 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">
|
|
{/* Early access bar */}
|
|
<div className="border-b border-amber-500/20 bg-amber-500/5">
|
|
<div className="mx-auto flex max-w-6xl flex-col gap-1 px-4 py-2 text-[0.75rem] text-amber-100 md:flex-row md:items-center md:justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<span className="rounded-sm bg-amber-500/20 px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.18em] text-amber-300">
|
|
Early Access Beta
|
|
</span>
|
|
<span className="hidden text-amber-100/90 md:inline">
|
|
You're using an early-access prototype of The Armory. Data,
|
|
pricing, and available parts are still evolving.
|
|
</span>
|
|
</div>
|
|
<span className="text-amber-100/90 md:hidden">
|
|
Early-access prototype. Data and pricing may change.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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>
|
|
|
|
{/* Center: main nav (Builder / Admin) */}
|
|
<nav className="hidden items-center gap-4 md:flex">
|
|
<Link
|
|
href="/gunbuilder"
|
|
className="text-xs font-medium text-zinc-300 hover:text-zinc-50 transition-colors"
|
|
>
|
|
Builder
|
|
</Link>
|
|
|
|
{isAuthenticated && (
|
|
<Link
|
|
href="/admin"
|
|
className="text-xs font-medium text-emerald-400 hover:text-emerald-300 transition-colors"
|
|
>
|
|
Admin
|
|
</Link>
|
|
)}
|
|
</nav>
|
|
|
|
{/* 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>
|
|
);
|
|
} |