"use client"

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from "@/registry/ui/navigation-menu/navigation-menu"

const stations = [
  {
    href: "#kx-7",
    title: "KX-7 · Svalbard",
    description: "Polar uplink, 24h coverage above 66°N.",
  },
  {
    href: "#kx-9",
    title: "KX-9 · Reykjavik",
    description: "North Atlantic relay and backup beacon.",
  },
  {
    href: "#vd-2",
    title: "VD-2 · Quito",
    description: "Equatorial gateway for LEO passes.",
  },
  {
    href: "#vd-5",
    title: "VD-5 · Nairobi",
    description: "East African node, S-band capable.",
  },
]

const handbook = [
  {
    href: "#first-contact",
    title: "First contact",
    description: "License a callsign and join the grid.",
  },
  {
    href: "#band-plan",
    title: "Band plan",
    description: "Who transmits where, and when.",
  },
  {
    href: "#relay-etiquette",
    title: "Relay etiquette",
    description: "Keep the channel clear for everyone.",
  },
]

export default function NavigationMenuBasic() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Network</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[26rem] max-w-full grid-cols-2 gap-1">
              {stations.map((station) => (
                <li key={station.href}>
                  <NavigationMenuLink href={station.href}>
                    <div className="font-medium">{station.title}</div>
                    <p className="mt-0.5 text-xs text-muted-foreground">
                      {station.description}
                    </p>
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>

        <NavigationMenuItem>
          <NavigationMenuTrigger>Handbook</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="flex w-64 max-w-full flex-col gap-1">
              {handbook.map((page) => (
                <li key={page.href}>
                  <NavigationMenuLink href={page.href}>
                    <div className="font-medium">{page.title}</div>
                    <p className="mt-0.5 text-xs text-muted-foreground">
                      {page.description}
                    </p>
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>

        <NavigationMenuItem>
          <NavigationMenuLink
            href="#status"
            className="inline-flex h-9 items-center px-3 font-medium text-muted-foreground hover:text-foreground"
          >
            Status
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>

      <NavigationMenuViewport />
    </NavigationMenu>
  )
}
Draw

Examples
