const { Tailwind } = VM.require("beachsunandrockandroll.near/widget/preflight"); const { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerClassname, } = VM.require("beachsunandrockandroll.near/widget/navigationMenu"); 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.", }, ]; const ListItem = ({ className, title, children, ...props }) => { return ( <li> <NavigationMenuLink> <a ref="forwardedRef" 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" {...props} > <div className="text-sm font-medium leading-none">{title}</div> <p className="line-clamp-2 text-sm leading-snug text-muted-foreground"> {children} </p> </a> </NavigationMenuLink> </li> ); }; if (Tailwind === undefined) return <></>; return ( <Tailwind> <div className="flex mx-auto w-max pt-10"> <NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuTrigger>Getting started</NavigationMenuTrigger> <NavigationMenuContent> <ul className="gap-3 p-4 w-80"> <li> <NavigationMenuLink> <a className="flex h-full w-full select-none flex-col hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground justify-end rounded-md p-3 no-underline outline-none focus:shadow-md" href="/" > <div className="mb-2 text-lg font-medium">UI is Near</div> <p className="text-sm leading-tight text-muted-foreground"> Beautifully designed components built with Radix UI and Tailwind CSS. </p> </a> </NavigationMenuLink> </li> <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> </ul> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuTrigger>Components</NavigationMenuTrigger> <NavigationMenuContent> <ul className="w-96 gap-3 p-4 grid md:grid-cols-2"> {components.map((component) => ( <ListItem key={component.title} title={component.title} href={component.href} > {component.description} </ListItem> ))} </ul> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <a href="#"> <NavigationMenuLink className={navigationMenuTriggerClassname}> Documentation </NavigationMenuLink> </a> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu> </div> </Tailwind> );