60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
export default function Nav() {
|
|
const pathname = usePathname() ?? "/";
|
|
const isUsers = pathname.startsWith("/users");
|
|
const isAccounts = !isUsers;
|
|
|
|
return (
|
|
<header className="sticky top-0 z-10 border-b-2 border-zinc-900 bg-white/95 backdrop-blur">
|
|
<div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3">
|
|
<div className="hidden flex-col leading-none sm:flex">
|
|
<span className="font-mono text-sm font-bold uppercase tracking-[0.2em] text-zinc-900">
|
|
CM Bot V2
|
|
</span>
|
|
<span className="mt-0.5 font-mono text-[10px] uppercase tracking-[0.3em] text-zinc-500">
|
|
// dashboard
|
|
</span>
|
|
</div>
|
|
|
|
<nav className="flex items-center gap-2" aria-label="Primary">
|
|
<NavLink href="/" active={isAccounts}>
|
|
Accounts
|
|
</NavLink>
|
|
<NavLink href="/users" active={isUsers}>
|
|
Users
|
|
</NavLink>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
function NavLink({
|
|
href,
|
|
active,
|
|
children,
|
|
}: {
|
|
href: string;
|
|
active: boolean;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const base =
|
|
"inline-flex items-center border-2 px-3 py-1.5 font-mono text-[11px] font-bold uppercase tracking-[0.2em] transition-colors";
|
|
const activeCls = "border-zinc-900 bg-yellow-300 text-zinc-900";
|
|
const inactiveCls =
|
|
"border-transparent text-zinc-700 hover:border-zinc-900 hover:bg-yellow-50 hover:text-zinc-900";
|
|
return (
|
|
<Link
|
|
href={href}
|
|
aria-current={active ? "page" : undefined}
|
|
className={`${base} ${active ? activeCls : inactiveCls}`}
|
|
>
|
|
{children}
|
|
</Link>
|
|
);
|
|
}
|