{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu-demo",
  "registryDependencies": [
    "@delta/navigation-menu"
  ],
  "files": [
    {
      "path": "examples/navigation-menu-demo.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuPopup,\n  NavigationMenuPositioner,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Navigation Menu\",\n    href: \"/docs/components/navigation-menu\",\n    description: \"A collection of links for navigating websites.\",\n  },\n  {\n    title: \"Chat\",\n    href: \"/docs/components/chat\",\n    description: \"AI chat interface with streaming responses.\",\n  },\n  {\n    title: \"Code Block\",\n    href: \"/docs/components/code-block\",\n    description: \"Syntax highlighted code with copy functionality.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/components/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"QR Code\",\n    href: \"/docs/components/qrcode\",\n    description: \"Generate customizable QR codes with various styling options.\",\n  },\n  {\n    title: \"Card Deck\",\n    href: \"/docs/components/card-deck\",\n    description:\n      \"Interactive card deck component with swipe and drag functionality.\",\n  },\n]\n\nconst overviewLinks = [\n  {\n    title: \"Quick Start\",\n    description: \"Install and assemble your first component.\",\n    href: \"/docs\",\n  },\n  {\n    title: \"Installation\",\n    description: \"Learn how to set up Delta Components in your project.\",\n    href: \"/docs/installation\",\n  },\n  {\n    title: \"Usage\",\n    description: \"See what's new in the latest versions.\",\n    href: \"/docs/usage\",\n  },\n]\n\nexport default function NavigationMenuDemo() {\n  return (\n    <div className=\"bg-background flex min-h-[400px] items-center justify-center px-4\">\n      <NavigationMenu>\n        <NavigationMenuList className=\"gap-0.5\">\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Overview</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[90vw] max-w-[400px] gap-2 md:w-[400px]\">\n                {overviewLinks.map((link) => (\n                  <ListItem\n                    key={link.title}\n                    href={link.href}\n                    title={link.title}\n                  >\n                    {link.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[90vw] max-w-[600px] gap-4 md:w-[600px] md:grid-cols-2\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={\n                <Link href=\"/docs\" className={navigationMenuTriggerStyle()} />\n              }\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n\n        <NavigationMenuPositioner>\n          <NavigationMenuPopup />\n        </NavigationMenuPositioner>\n      </NavigationMenu>\n    </div>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"text-sm leading-none font-medium\">{title}</div>\n        <p className=\"text-muted-foreground line-clamp-2 text-sm leading-snug\">\n          {children}\n        </p>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}