spb/tools-spboucher-ai

1import Link from "next/link";2import { ThemeToggle } from "./theme-toggle";3import { SearchBox } from "./search-box";4import { Compass } from "lucide-react";56const NAV = [["/tools", "Directory"], ["/categories", "Categories"], ["/collections", "Collections"], ["/compare", "Compare"], ["/about", "About"]] as const;7export function SiteHeader({ compact = false }: { compact?: boolean }) {8  return (9    <header className="sticky top-0 z-40 border-b border-line/80 bg-bg/85 backdrop-blur supports-[backdrop-filter]:bg-bg/70">10      <div className="mx-auto flex h-14 max-w-7xl items-center gap-3 px-4 sm:px-6">11        <Link href="/" className="flex items-center gap-2 font-semibold tracking-tight" aria-label="Tools · SPBoucher home">12          <span className="grid h-8 w-8 place-items-center rounded-lg bg-accent text-accent-fg"><Compass className="h-4 w-4" aria-hidden /></span>13          <span className="display text-lg">Tools<span className="text-fg-3"> · </span><span className="text-fg-2">SPBoucher</span></span>14        </Link>15        <div className="hidden flex-1 justify-center md:flex">{!compact && <SearchBox size="sm" />}</div>16        <nav aria-label="Primary" className="ml-auto hidden items-center gap-1 lg:flex">17          {NAV.map(([href, l]) => <Link key={href} href={href} className="rounded-lg px-3 py-1.5 text-sm text-fg-2 hover:bg-bg-3 hover:text-fg">{l}</Link>)}18        </nav>19        <ThemeToggle />20        <details className="relative lg:hidden">21          <summary className="btn-ghost h-9 cursor-pointer list-none px-3 text-sm" aria-label="Open menu">Menu</summary>22          <nav aria-label="Mobile" className="absolute right-0 mt-2 w-48 overflow-hidden rounded-xl border border-line bg-bg-2 p-1 shadow-lift">23            {NAV.map(([href, l]) => <Link key={href} href={href} className="block rounded-lg px-3 py-2 text-sm hover:bg-bg-3">{l}</Link>)}24          </nav>25        </details>26      </div>27      {!compact && <div className="border-t border-line/60 px-4 py-2 md:hidden"><SearchBox size="sm" /></div>}28    </header>29  );30}31