File size: 1,643 Bytes
677b1c7 | 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 | import { Link } from "@tanstack/react-router";
const nav = [
{ to: "/", label: "Overview" },
{ to: "/dataset", label: "Dataset" },
{ to: "/models", label: "Models" },
{ to: "/resources", label: "Resources" },
];
export function Header() {
return (
<header className="fixed top-0 inset-x-0 z-50 border-b border-soft bg-background/70 backdrop-blur-md">
<div className="mx-auto max-w-7xl px-6 h-16 flex items-center justify-between">
<Link to="/" className="flex items-center gap-2">
<div className="h-7 w-7 rounded-md bg-gradient-to-br from-brand to-brand-glow grid place-items-center text-[10px] font-bold text-primary-foreground">
LSM
</div>
<span className="font-display font-bold tracking-tight">Large Spectrum Models</span>
</Link>
<nav className="hidden md:flex items-center gap-1">
{nav.map((n) => (
<Link
key={n.to}
to={n.to}
className="px-3 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
activeProps={{ className: "px-3 py-2 text-sm text-foreground font-medium" }}
activeOptions={{ exact: true }}
>
{n.label}
</Link>
))}
<a
href="https://github.com/UNL-CPN-Lab/LSM.git"
target="_blank"
rel="noreferrer"
className="ml-3 px-4 py-2 text-sm font-medium rounded-full bg-primary text-primary-foreground hover:opacity-90 transition"
>
GitHub
</a>
</nav>
</div>
</header>
);
}
|