navigation-menu

1"use client"
2 
3import { cn } from "@/lib/utils"
4import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
5import { cva } from "class-variance-authority"
6import { ChevronDownIcon } from "lucide-react"
7import * as React from "react"
8 
9function NavigationMenu({
10  className,
11  children,
12  viewport = true,
13  ...props
14}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
15  viewport?: boolean
16}) {
17  return (
18    <NavigationMenuPrimitive.Root
19      data-slot="navigation-menu"
20      data-viewport={viewport}
21      className={cn(
22        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
23        className,
24      )}
25      {...props}
26    >
27      {children}
28      {viewport && <NavigationMenuViewport />}
29    </NavigationMenuPrimitive.Root>
30  )
31}
32 
33function NavigationMenuList({
34  className,
35  ...props
36}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
37  return (
38    <NavigationMenuPrimitive.List
39      data-slot="navigation-menu-list"
40      className={cn(
41        "group flex flex-1 list-none items-center justify-center gap-1",
42        className,
43      )}
44      {...props}
45    />
46  )
47}
48 
49function NavigationMenuItem({
50  className,
51  ...props
52}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
53  return (
54    <NavigationMenuPrimitive.Item
55      data-slot="navigation-menu-item"
56      className={cn("relative", className)}
57      {...props}
58    />
59  )
60}
61 
62const navigationMenuTriggerStyle = cva(
63  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[active=true]:bg-accent/50 data-[state=open]:bg-accent/50 data-[active=true]:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1",
64)
65 
66function NavigationMenuTrigger({
67  className,
68  children,
69  ...props
70}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
71  return (
72    <NavigationMenuPrimitive.Trigger
73      data-slot="navigation-menu-trigger"
74      className={cn(navigationMenuTriggerStyle(), "group", className)}
75      {...props}
76    >
77      {children}{" "}
78      <ChevronDownIcon
79        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
80        aria-hidden="true"
81      />
82// … truncated