Navigation Menu

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from 'radcn/navigation-menu'

const components = [
  {
    title: 'Alert Dialog',
    href: '/docs/primitives/alert-dialog',
    description:
      'A modal dialog that interrupts the user with important content and expects a response.',
  },
  {
    title: 'Hover Card',
    href: '/docs/primitives/hover-card',
    description: 'For sighted users to preview content available behind a link.',
  },
  {
    title: 'Progress',
    href: '/docs/primitives/progress',
    description:
      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
  },
  {
    title: 'Scroll-area',
    href: '/docs/primitives/scroll-area',
    description: 'Visually or semantically separates content.',
  },
  {
    title: 'Tabs',
    href: '/docs/primitives/tabs',
    description:
      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
  },
  {
    title: 'Tooltip',
    href: '/docs/primitives/tooltip',
    description:
      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
  },
]

export function NavigationMenuDemo() {
  return (
    <NavigationMenu defaultValue="home" id="navigation-menu-demo">
      <NavigationMenuList class="flex-wrap">
        <NavigationMenuItem value="home">
          <NavigationMenuTrigger>Home</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div class="navigation-menu-home-grid">
              <NavigationMenuLink href="/">
                <div>shadcn/ui</div>
                <p>Beautifully designed components built with Tailwind CSS.</p>
              </NavigationMenuLink>
              <div>
                <ListItem href="/docs" title="Introduction">
                  Re-usable components built using Radix UI and Tailwind CSS.
                </ListItem>
                <ListItem href="/docs/installation" title="Installation">
                  How to install dependencies and structure your app.
                </ListItem>
                <ListItem href="/docs/primitives/typography" title="Typography">
                  Styles for headings, paragraphs, lists...etc
                </ListItem>
              </div>
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem value="components">
          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div class="navigation-menu-components-grid">
              {components.map((component) => (
                <ListItem href={component.href} title={component.title}>
                  {component.description}
                </ListItem>
              ))}
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem value="docs">
          <NavigationMenuLink href="/docs">Docs</NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem class="desktop-only" value="list">
          <NavigationMenuTrigger>List</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ListItem href="#" title="Components">Browse all components in the library.</ListItem>
            <ListItem href="#" title="Documentation">Learn how to use the library.</ListItem>
            <ListItem href="#" title="Blog">Read our latest blog posts.</ListItem>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem class="desktop-only" value="simple">
          <NavigationMenuTrigger>Simple</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLink href="#">Components</NavigationMenuLink>
            <NavigationMenuLink href="#">Documentation</NavigationMenuLink>
            <NavigationMenuLink href="#">Blocks</NavigationMenuLink>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem class="desktop-only" value="with-icon">
          <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLink href="#">? Backlog</NavigationMenuLink>
            <NavigationMenuLink href="#">o To Do</NavigationMenuLink>
            <NavigationMenuLink href="#">✓ Done</NavigationMenuLink>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
      <NavigationMenuIndicator />
      <NavigationMenuViewport />
    </NavigationMenu>
  )
}

function ListItem({ children, href, title }) {
  return (
    <NavigationMenuLink href={href}>
      <div>{title}</div>
      <p>{children}</p>
    </NavigationMenuLink>
  )
}