Navbar — dark with search

import { Bell, Search } from "lucide-react";

const sections = [
  { label: "Overview", href: "/docs" },
  { label: "Guides", href: "/docs/guides" },
  { label: "API reference", href: "/docs/api" },
  { label: "Integrations", href: "/docs/integrations" },
  { label: "Changelog", href: "/changelog" },
];
const links = [
  { label: "Status", href: "/status" },
  { label: "Support", href: "/support" },
];

/** Dark in both themes: uses the neutral ramp, which does not flip in dark mode. */
export function NavbarDarkSearch({ current = "/docs/guides" }: { current?: string }) {
  return (
    <header className="border-b border-neutral-50/10 bg-neutral-950 font-sans text-neutral-50">
      <div className="mx-auto flex h-[60px] max-w-6xl items-center gap-3 px-4 sm:gap-6 sm:px-7">
        <a href="/" className="flex items-center gap-2 text-base font-semibold tracking-tight">
          <span aria-hidden className="size-6 rounded-sm bg-primary" />
          <span className="hidden sm:inline">Fernbill</span>
        </a>
        <form role="search" action="/docs/search" className="flex h-9 min-w-0 flex-1 items-center gap-2 rounded border border-neutral-50/15 bg-neutral-50/5 pl-3 pr-1.5 text-neutral-400 sm:max-w-xs">
          <Search className="size-4 shrink-0" aria-hidden />
          <label htmlFor="docs-search" className="sr-only">Search the docs</label>
          <input id="docs-search" name="q" type="search" placeholder="Search the docs" className="h-full min-w-0 flex-1 bg-transparent text-[13.5px] text-neutral-50 outline-none placeholder:text-neutral-400" />
          <kbd className="hidden rounded-sm border border-neutral-50/15 px-1.5 py-0.5 text-[11px] font-medium sm:inline">⌘K</kbd>
        </form>
        <nav aria-label="Main" className="hidden md:block">
          <ul className="flex gap-0.5">
            {links.map((l) => (
              <li key={l.href}>
                <a href={l.href} className="inline-flex h-9 items-center rounded px-3 text-sm text-neutral-400 transition hover:bg-neutral-50/10 hover:text-neutral-50">{l.label}</a>
              </li>
            ))}
          </ul>
        </nav>
        <div className="ml-auto flex items-center gap-2">
          <button type="button" aria-label="Notifications" className="grid size-9 place-items-center rounded text-neutral-400 hover:bg-neutral-50/10 hover:text-neutral-50">
            <Bell className="size-[18px]" />
          </button>
          <a href="/account" aria-label="Your account" className="grid size-[30px] place-items-center rounded-full bg-primary text-xs font-semibold text-primary-fg">AR</a>
        </div>
      </div>
      <nav aria-label="Sections" className="mx-auto flex max-w-6xl gap-6 overflow-x-auto px-4 [scrollbar-width:none] sm:px-7">
        {sections.map((s) => (
          <a
            key={s.href}
            href={s.href}
            aria-current={s.href === current ? "page" : undefined}
            className="whitespace-nowrap border-b-2 border-transparent pb-3 pt-2.5 text-[13.5px] text-neutral-400 hover:text-neutral-50 aria-[current=page]:border-primary aria-[current=page]:text-neutral-50"
          >
            {s.label}
          </a>
        ))}
      </nav>
    </header>
  );
}