File size: 2,153 Bytes
2f00f43 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | import { NavLink, useLocation } from "react-router-dom";
import { Cpu } from "lucide-react";
const items = [
{ to: "/", label: "Home", key: "home" },
{ to: "/console", label: "Console", key: "console" },
{ to: "/feed", label: "Feed", key: "feed" },
{ to: "/blueprint", label: "Blueprint", key: "blueprint" },
{ to: "/journal", label: "Journal", key: "journal" },
];
export default function Nav() {
const { pathname } = useLocation();
return (
<nav
className="sticky top-0 z-40 w-full bg-[#0A0A0A]/90 backdrop-blur-md border-b border-white/10"
data-testid="top-nav"
>
<div className="mx-auto max-w-[1400px] px-6 h-14 flex items-center justify-between">
<NavLink to="/" className="flex items-center gap-3" data-testid="nav-logo">
<div className="w-6 h-6 border border-[#ED1C24] flex items-center justify-center">
<div className="w-1.5 h-1.5 bg-[#ED1C24]" />
</div>
<span className="font-display font-black tracking-tighter text-lg">FORGESIGHT</span>
<span className="fs-label hidden md:inline">v0.1 · hackathon build</span>
</NavLink>
<div className="hidden md:flex items-center gap-1 border border-white/10 p-1">
{items.map((it) => {
const active = pathname === it.to;
return (
<NavLink
key={it.key}
to={it.to}
data-testid={`nav-${it.key}`}
className={`px-3 py-1.5 text-xs font-mono uppercase tracking-[0.18em] transition-colors ${
active ? "bg-[#ED1C24] text-white" : "text-zinc-400 hover:text-white hover:bg-white/5"
}`}
>
{it.label}
</NavLink>
);
})}
</div>
<div className="hidden lg:flex items-center gap-2 border border-white/10 px-3 py-1.5">
<Cpu className="w-3.5 h-3.5 text-[#ED1C24]" />
<span className="fs-mono-small text-zinc-400">POWERED BY</span>
<span className="fs-mono-small text-white">AMD INSTINCT MI300X</span>
</div>
</div>
</nav>
);
}
|