navigation-menu-demo

1"use client"
2 
3import * as React from "react"
4import Link from "next/link"
5 
6import {
7  NavigationMenu,
8  NavigationMenuContent,
9  NavigationMenuItem,
10  NavigationMenuLink,
11  NavigationMenuList,
12  NavigationMenuPopup,
13  NavigationMenuPositioner,
14  NavigationMenuTrigger,
15  navigationMenuTriggerStyle,
16} from "@/components/ui/navigation-menu"
17 
18const components: { title: string; href: string; description: string }[] = [
19  {
20    title: "Navigation Menu",
21    href: "/docs/components/navigation-menu",
22    description: "A collection of links for navigating websites.",
23  },
24  {
25    title: "Chat",
26    href: "/docs/components/chat",
27    description: "AI chat interface with streaming responses.",
28  },
29  {
30    title: "Code Block",
31    href: "/docs/components/code-block",
32    description: "Syntax highlighted code with copy functionality.",
33  },
34  {
35    title: "Tabs",
36    href: "/docs/components/tabs",
37    description:
38      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
39  },
40  {
41    title: "QR Code",
42    href: "/docs/components/qrcode",
43    description: "Generate customizable QR codes with various styling options.",
44  },
45  {
46    title: "Card Deck",
47    href: "/docs/components/card-deck",
48    description:
49      "Interactive card deck component with swipe and drag functionality.",
50  },
51]
52 
53const overviewLinks = [
54  {
55    title: "Quick Start",
56    description: "Install and assemble your first component.",
57    href: "/docs",
58  },
59  {
60    title: "Installation",
61    description: "Learn how to set up Delta Components in your project.",
62    href: "/docs/installation",
63  },
64  {
65    title: "Usage",
66    description: "See what's new in the latest versions.",
67    href: "/docs/usage",
68  },
69]
70 
71export default function NavigationMenuDemo() {
72  return (
73    <div className="bg-background flex min-h-[400px] items-center justify-center px-4">
74      <NavigationMenu>
75        <NavigationMenuList className="gap-0.5">
76          <NavigationMenuItem>
77            <NavigationMenuTrigger>Overview</NavigationMenuTrigger>
78            <NavigationMenuContent>
79              <ul className="grid w-[90vw] max-w-[400px] gap-2 md:w-[400px]">
80                {overviewLinks.map((link) => (
81                  <ListItem
82                    key={link.title}
83                    href={link.href}
84                    title={link.title}
85                  >
86                    {link.description}
87                  </ListItem>
88                ))}
89              </ul>
90// … truncated