navigation-menu

1import * as React from "react"
2import { cva } from "class-variance-authority"
3import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
4 
5import { cn } from "@/registry/radix-sera/lib/utils"
6import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
7 
8function NavigationMenu({
9  className,
10  children,
11  viewport = true,
12  ...props
13}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
14  viewport?: boolean
15}) {
16  return (
17    <NavigationMenuPrimitive.Root
18      data-slot="navigation-menu"
19      data-viewport={viewport}
20      className={cn(
21        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
22        className
23      )}
24      {...props}
25    >
26      {children}
27      {viewport && <NavigationMenuViewport />}
28    </NavigationMenuPrimitive.Root>
29  )
30}
31 
32function NavigationMenuList({
33  className,
34  ...props
35}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
36  return (
37    <NavigationMenuPrimitive.List
38      data-slot="navigation-menu-list"
39      className={cn(
40        "group flex flex-1 list-none items-center justify-center gap-0",
41        className
42      )}
43      {...props}
44    />
45  )
46}
47 
48function NavigationMenuItem({
49  className,
50  ...props
51}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
52  return (
53    <NavigationMenuPrimitive.Item
54      data-slot="navigation-menu-item"
55      className={cn("relative", className)}
56      {...props}
57    />
58  )
59}
60 
61const navigationMenuTriggerStyle = cva(
62  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-none px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
63)
64 
65function NavigationMenuTrigger({
66  className,
67  children,
68  ...props
69}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
70  return (
71    <NavigationMenuPrimitive.Trigger
72      data-slot="navigation-menu-trigger"
73      className={cn(navigationMenuTriggerStyle(), "group", className)}
74      {...props}
75    >
76      {children}{" "}
77      <IconPlaceholder
78        lucide="ChevronDownIcon"
79        tabler="IconChevronDown"
80        hugeicons="ArrowDown01Icon"
81        phosphor="CaretDownIcon"
82        remixicon="RiArrowDownSLine"
83// … truncated