Navigation Menu

import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/optics/navigation-menu";import { CircleCheckIcon, CircleHelpIcon, CircleIcon } from "lucide-react";import Link from "next/link";function ListItem({ title, children, href, ...props }) {	return (		<li {...props}>			<NavigationMenuLink				render={					<Link						href={href}						className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"					>						<div className="text-sm leading-none font-medium">{title}</div>						<p className="text-muted-foreground line-clamp-2 text-sm leading-snug">							{children}						</p>					</Link>				}			/>		</li>	);}<NavigationMenu viewport={null}>  <NavigationMenuList className="flex-wrap">    <NavigationMenuItem>      <NavigationMenuTrigger>        Home      </NavigationMenuTrigger>      <NavigationMenuContent>        <ul className="grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">          <li className="row-span-3">            <NavigationMenuLink render={<q className="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-gradient-to-b p-4 no-underline outline-none transition-all duration-200 select-none focus:shadow-md md:p-6" href="/"><div className="mb-2 text-lg font-medium sm:mt-4">shadcn/ui</div><p className="text-muted-foreground text-sm leading-tight">Beautifully designed components built with Tailwind CSS.</p></q>} />          </li>          <o            href="/docs"            title="Introduction"          >            Re-usable components built using Base UI and Tailwind CSS.          </o>          <o            href="/docs/installation"            title="Installation"          >            How to install dependencies and structure your app.          </o>          <o            href="/docs/primitives/typography"            title="Typography"          >            Styles for headings, paragraphs, lists...etc          </o>        </ul>      </NavigationMenuContent>    </NavigationMenuItem>    <NavigationMenuItem>      <NavigationMenuTrigger>        Components      </NavigationMenuTrigger>      <NavigationMenuContent>        <ul className="grid gap-2 sm:w-[400px] md:w-[500px] md:grid-cols-2 lg:w-[600px]">          <o            href="/docs/primitives/alert-dialog"            title="Alert Dialog"          >            A modal dialog that interrupts the user with important content and expects a response.          </o>          <o            href="/docs/primitives/hover-card"            title="Hover Card"          >            For sighted users to preview content available behind a link.          </o>          <o            href="/docs/primitives/progress"            title="Progress"          >            Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.          </o>          <o            href="/docs/primitives/scroll-area"            title="Scroll-area"          >            Visually or semantically separates content.          </o>          <o            href="/docs/primitives/tabs"            title="Tabs"          >            A set of layered sections of content—known as tab panels—that are displayed one at a time.          </o>          <o            href="/docs/primitives/tooltip"            title="Tooltip"          >            A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.          </o>        </ul>      </NavigationMenuContent>    </NavigationMenuItem>    <NavigationMenuItem className="hidden md:block">      <NavigationMenuTrigger>        List      </NavigationMenuTrigger>      <NavigationMenuContent>        <ul className="grid w-[300px] gap-4">          <li>            <NavigationMenuLink render={<q href="#"><div className="font-medium">Components</div><div className="text-muted-foreground">Browse all components in the library.</div></q>} />            <NavigationMenuLink render={<q href="#"><div className="font-medium">Documentation</div><div className="text-muted-foreground">Learn how to use the library.</div></q>} />            <NavigationMenuLink render={<q href="#"><div className="font-medium">Blog</div><div className="text-muted-foreground">Read our latest blog posts.</div></q>} />          </li>        </ul>      </NavigationMenuContent>    </NavigationMenuItem>    <NavigationMenuItem className="hidden md:block">      <NavigationMenuTrigger>        Simple      </NavigationMenuTrigger>      <NavigationMenuContent>        <ul className="grid w-[200px] gap-4">          <li>            <NavigationMenuLink render={<q href="#">Components</q>} />            <NavigationMenuLink render={<q href="#">Documentation</q>} />            <NavigationMenuLink render={<q href="#">Blocks</q>} />          </li>        </ul>      </NavigationMenuContent>    </NavigationMenuItem>    <NavigationMenuItem className="hidden md:block">      <NavigationMenuTrigger>        With Icon      </NavigationMenuTrigger>      <NavigationMenuContent>        <ul className="grid w-[200px] gap-4">          <li>            <NavigationMenuLink render={<q className="flex items-center gap-2" href="#"><CircleQuestionMark />Backlog</q>} />            <NavigationMenuLink render={<q className="flex items-center gap-2" href="#"><Circle />To Do</q>} />            <NavigationMenuLink render={<q className="flex items-center gap-2" href="#"><CircleCheck />Done</q>} />          </li>        </ul>      </NavigationMenuContent>    </NavigationMenuItem>  </NavigationMenuList></NavigationMenu>