Navigation Menu

"use client"

import { AppWindowIcon, BookOpenIcon, LayoutGridIcon, PaletteIcon } from "lucide-react"

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

const docs = [
  { title: "Installation", description: "Add the registry and the macOS theme.", icon: BookOpenIcon },
  { title: "Theming", description: "Accent colors, appearance and materials.", icon: PaletteIcon },
]

const components = [
  { title: "Window", description: "Title bars, traffic lights and toolbars.", icon: AppWindowIcon },
  { title: "Dock", description: "Magnification, running dots and badges.", icon: LayoutGridIcon },
]

function Links({ items }: { items: typeof docs }) {
  return (
    <ul className="grid w-[340px] gap-0.5">
      {items.map((item) => (
        <li key={item.title}>
          <NavigationMenuLink href="#" className="items-start">
            <item.icon className="mt-0.5 text-mac-accent" />
            <span className="flex flex-col gap-0.5">
              <span className="font-semibold">{item.title}</span>
              <span className="text-mac-subheadline text-mac-label-secondary">{item.description}</span>
            </span>
          </NavigationMenuLink>
        </li>
      ))}
    </ul>
  )
}

export default function NavigationMenuDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <Links items={docs} />
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
          <NavigationMenuContent>
            <Links items={components} />
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="#" className="h-7 rounded-full px-3 font-medium">
            Blocks
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}