index.tsx44 lines · main

1	import { forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
2
3	import { cn } from '../../lib/utils/cn'
4
5	interface NavMenuProps extends HTMLAttributes<HTMLDivElement> {}
6
7	export const NavMenu = forwardRef<HTMLDivElement, NavMenuProps>(
8	(
9	props: PropsWithChildren<{
10	className?: string
11	}>,
12	forwardedRef
13	) => {
14	return (
15	<nav ref={forwardedRef} dir="ltr" {...props} className={cn('border-b', props.className)}>
16	<ul role="menu" className="flex gap-5">
17	{props.children}
18	</ul>
19	</nav>
20	)
21	}
22	)
23
24	interface NavMenuItemProps extends PropsWithChildren<{
25	className?: string
26	active: boolean
27	}> {}
28
29	export const NavMenuItem = forwardRef<HTMLLIElement, NavMenuItemProps>(
30	({ children, className, active, ...props }, ref) => (
31	<li
32	ref={ref}
33	aria-selected={active ? 'true' : 'false'}
34	data-state={active ? 'active' : 'inactive'}
35	className={cn(
36	'inline-flex items-center justify-center whitespace-nowrap text-sm ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground text-foreground-lighter hover:text-foreground data-[state=active]:border-foreground border-b-2 border-transparent *:py-1.5',
37	className
38	)}
39	{...props}
40	>
41	{children}
42	</li>
43	)
44	)