Navigation menustandard

"use client"
import * as React from "react"import Link from "next/link"
import {  Example,  ExampleWrapper,} from "@/components/example"import {  NavigationMenu,  NavigationMenuContent,  NavigationMenuItem,  NavigationMenuLink,  NavigationMenuList,  NavigationMenuTrigger,  navigationMenuTriggerStyle,} from "@/components/ui/navigation-menu"import { CircleAlertIcon } from "lucide-react"
const components: { title: string; href: string; description: string }[] = [  {    title: "Alert Dialog",    href: "#alert-dialog",    description:      "A modal dialog that interrupts the user with important content and expects a response.",  },  {    title: "Hover Card",    href: "#hover-card",    description:      "For sighted users to preview content available behind a link.",  },  {    title: "Progress",    href: "#progress",    description:      "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",  },  {    title: "Scroll-area",    href: "#scroll-area",    description: "Visually or semantically separates content.",  },  {    title: "Tabs",    href: "#tabs",    description:      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",  },  {    title: "Tooltip",    href: "#tooltip",    description:      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",  },]
export default function NavigationMenuExample() {  return (    <ExampleWrapper className="lg:grid-cols-1">      <NavigationMenuBasic />    </ExampleWrapper>  )}
function NavigationMenuBasic() {  return (    <Example title="Basic">      <NavigationMenu>        <NavigationMenuList>          <NavigationMenuItem>            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>            <NavigationMenuContent>              <ul className="w-96">                <ListItem href="#" title="Introduction">                  Re-usable components built with Tailwind CSS.                </ListItem>                <ListItem href="#" title="Installation">                  How to install dependencies and structure your app.                </ListItem>                <ListItem href="#" title="Typography">                  Styles for headings, paragraphs, lists...etc                </ListItem>              </ul>            </NavigationMenuContent>          </NavigationMenuItem>          <NavigationMenuItem>            <NavigationMenuTrigger>Components</NavigationMenuTrigger>            <NavigationMenuContent>              <ul className="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">                {components.map((component) => (                  <ListItem                    key={component.title}                    title={component.title}                    href={component.href}                  >                    {component.description}                  </ListItem>                ))}              </ul>            </NavigationMenuContent>          </NavigationMenuItem>          <NavigationMenuItem>            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>            <NavigationMenuContent>              <ul className="grid w-[200px]">                <li>                  <NavigationMenuLink                    render={                      <Link href="#" className="flex-row items-center gap-2" />                    }                  >                    <CircleAlertIcon />                    Backlog                  </NavigationMenuLink>                  <NavigationMenuLink                    render={                      <Link href="#" className="flex-row items-center gap-2" />                    }                  >                    <CircleAlertIcon />                    To Do                  </NavigationMenuLink>                  <NavigationMenuLink                    render={                      <Link href="#" className="flex-row items-center gap-2" />                    }                  >                    <CircleAlertIcon />                    Done                  </NavigationMenuLink>                </li>              </ul>            </NavigationMenuContent>          </NavigationMenuItem>          <NavigationMenuItem>            <NavigationMenuLink              render={<Link href="#" />}              className={navigationMenuTriggerStyle()}            >              Documentation            </NavigationMenuLink>          </NavigationMenuItem>        </NavigationMenuList>      </NavigationMenu>    </Example>  )}
function ListItem({  title,  children,  href,  ...props}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {  return (    <li {...props}>      <NavigationMenuLink render={<Link href={href} />}>        <div className="flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs style-luma:text-sm">          <div className="leading-none font-medium">{title}</div>          <div className="line-clamp-2 text-muted-foreground">{children}</div>        </div>      </NavigationMenuLink>    </li>  )}