navigation-menu

1import * as React from "react"
2import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
3import { cva } from "class-variance-authority"
4import { ChevronDown } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7 
8const NavigationMenu = React.forwardRef<
9  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
10  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
11>(({ className, children, ...props }, ref) => (
12  <NavigationMenuPrimitive.Root
13    ref={ref}
14    className={cn(
15      "relative z-10 flex max-w-max flex-1 items-center justify-center",
16      className
17    )}
18    {...props}
19  >
20    {children}
21    <NavigationMenuViewport />
22  </NavigationMenuPrimitive.Root>
23))
24NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
25 
26const NavigationMenuList = React.forwardRef<
27  React.ElementRef<typeof NavigationMenuPrimitive.List>,
28  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
29>(({ className, ...props }, ref) => (
30  <NavigationMenuPrimitive.List
31    ref={ref}
32    className={cn(
33      "group flex flex-1 list-none items-center justify-center space-x-1",
34      className
35    )}
36    {...props}
37  />
38))
39NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
40 
41const NavigationMenuItem = NavigationMenuPrimitive.Item
42 
43const navigationMenuTriggerStyle = cva(
44  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
45)
46 
47const NavigationMenuTrigger = React.forwardRef<
48  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
49  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
50>(({ className, children, ...props }, ref) => (
51  <NavigationMenuPrimitive.Trigger
52    ref={ref}
53    className={cn(navigationMenuTriggerStyle(), "group", className)}
54    {...props}
55  >
56    {children}{" "}
57    <ChevronDown
58      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
59      aria-hidden="true"
60    />
61  </NavigationMenuPrimitive.Trigger>
62))
63NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
64 
65const NavigationMenuContent = React.forwardRef<
66// … truncated