NavigationMenu

'use client'

import {
	NavigationMenu,
	NavigationMenuArrow,
	NavigationMenuContent,
	NavigationMenuItem,
	NavigationMenuLink,
	NavigationMenuList,
	NavigationMenuPopup,
	NavigationMenuPositioner,
	NavigationMenuTrigger,
	navigationMenuTriggerStyle,
} from '@nerdfish/react/navigation-menu'
import { CircleCheckIcon, CircleHelpIcon, CircleIcon } from 'lucide-react'
import * as React from 'react'

const components: { title: string; href: string; description: string }[] = [
	{
		title: 'Alert Dialog',
		href: '/docs/primitives/alert-dialog',
		description:
			'A modal dialog that interrupts the user with important content and expects a response.',
	},
	{
		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.',
	},
]

export default function NavigationMenuExample() {
	return (
		<NavigationMenu>
			<NavigationMenuList>
				<NavigationMenuItem>
					<NavigationMenuTrigger>Home</NavigationMenuTrigger>
					<NavigationMenuContent>
						<ul className="grid w-125 grid-cols-[.75fr_1fr] gap-2">
							<li className="row-span-3">
								<NavigationMenuLink
									render={
										<a
											className="from-muted/50 to-muted rounded-[calc(var(--radius-base)-theme(padding.best-friends))] flex h-full w-full flex-col justify-end bg-linear-to-b p-6 no-underline outline-hidden select-none focus:shadow-md"
											href="/"
										/>
									}
								>
									<div className="mt-4 mb-2 text-lg font-medium">ReUI</div>
									<p className="text-muted-foreground text-sm leading-tight">
										Beautifully designed components built with Tailwind CSS.
									</p>
								</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="grid w-125 grid-cols-2 gap-2">
							{components.map((component) => (
								<ListItem
									key={component.title}
									title={component.title}
									href={component.href}
								>
									{component.description}
								</ListItem>
							))}
						</ul>
					</NavigationMenuContent>
				</NavigationMenuItem>
				<NavigationMenuItem>
					<NavigationMenuLink
						render={<a href="/docs" className={navigationMenuTriggerStyle()} />}
					>
						Docs
					</NavigationMenuLink>
				</NavigationMenuItem>
				<NavigationMenuItem>
					<NavigationMenuTrigger>List</NavigationMenuTrigger>
					<NavigationMenuContent>
						<ul className="grid w-75 gap-4">
							<li>
								<NavigationMenuLink render={<a href="#" />}>
									<div className="font-medium">Components</div>
									<div className="text-muted-foreground">
										Browse all components in the library.
									</div>
								</NavigationMenuLink>
								<NavigationMenuLink render={<a href="#" />}>
									<div className="font-medium">Documentation</div>
									<div className="text-muted-foreground">
										Learn how to use the library.
									</div>
								</NavigationMenuLink>
								<NavigationMenuLink render={<a href="#" />}>
									<div className="font-medium">Blog</div>
									<div className="text-muted-foreground">
										Read our latest blog posts.
									</div>
								</NavigationMenuLink>
							</li>
						</ul>
					</NavigationMenuContent>
				</NavigationMenuItem>
				<NavigationMenuItem>
					<NavigationMenuTrigger>Simple</NavigationMenuTrigger>
					<NavigationMenuContent>
						<ul className="grid w-50 gap-4">
							<li>
								<NavigationMenuLink render={<a href="#" />}>
									Components
								</NavigationMenuLink>
								<NavigationMenuLink render={<a href="#" />}>
									Documentation
								</NavigationMenuLink>
								<NavigationMenuLink render={<a href="#" />}>
									Blocks
								</NavigationMenuLink>
							</li>
						</ul>
					</NavigationMenuContent>
				</NavigationMenuItem>
				<NavigationMenuItem>
					<NavigationMenuTrigger>With Icon</NavigationMenuTrigger>
					<NavigationMenuContent>
						<ul className="grid w-50 gap-4">
							<li>
								<NavigationMenuLink
									render={
										<a href="#" className="flex-row items-center gap-2" />
									}
								>
									<CircleHelpIcon />
									Backlog
								</NavigationMenuLink>
								<NavigationMenuLink
									render={
										<a href="#" className="flex-row items-center gap-2" />
									}
								>
									<CircleIcon />
									To Do
								</NavigationMenuLink>
								<NavigationMenuLink
									render={
										<a href="#" className="flex-row items-center gap-2" />
									}
								>
									<CircleCheckIcon />
									Done
								</NavigationMenuLink>
							</li>
						</ul>
					</NavigationMenuContent>
				</NavigationMenuItem>
			</NavigationMenuList>

			<NavigationMenuPositioner>
				<NavigationMenuPopup>
					<NavigationMenuArrow />
				</NavigationMenuPopup>
			</NavigationMenuPositioner>
		</NavigationMenu>
	)
}

function ListItem({
	title,
	children,
	href,
	...props
}: React.ComponentPropsWithoutRef<'li'> & { href: string }) {
	return (
		<li {...props}>
			<NavigationMenuLink render={<a href={href} />}>
				<div className="text-sm leading-none font-medium">{title}</div>
				<p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
					{children}
				</p>
			</NavigationMenuLink>
		</li>
	)
}