CoolFace
Apppublic

huggingface/ai-deadlines

sourceHugging Faceupdated 3d agoView on Hugging Face
781likes
navigation-menu.tsx129 linesDownload Raw Back to ui
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.Root13    ref={ref}14    className={cn(15      "relative z-10 flex max-w-max flex-1 items-center justify-center",16      className17    )}18    {...props}19  >20    {children}21    <NavigationMenuViewport />22  </NavigationMenuPrimitive.Root>23))24NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName25 26const NavigationMenuList = React.forwardRef<27  React.ElementRef<typeof NavigationMenuPrimitive.List>,28  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>29>(({ className, ...props }, ref) => (30  <NavigationMenuPrimitive.List31    ref={ref}32    className={cn(33      "group flex flex-1 list-none items-center justify-center space-x-1",34      className35    )}36    {...props}37  />38))39NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName40 41const NavigationMenuItem = NavigationMenuPrimitive.Item42 43const navigationMenuTriggerStyle = cva(44  "group inline-flex h-10 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-[active]:bg-accent/50 data-[state=open]:bg-accent/50"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.Trigger52    ref={ref}53    className={cn(navigationMenuTriggerStyle(), "group", className)}54    {...props}55  >56    {children}{" "}57    <ChevronDown58      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"59      aria-hidden="true"60    />61  </NavigationMenuPrimitive.Trigger>62))63NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName64 65const NavigationMenuContent = React.forwardRef<66  React.ElementRef<typeof NavigationMenuPrimitive.Content>,67  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>68>(({ className, ...props }, ref) => (69  <NavigationMenuPrimitive.Content70    ref={ref}71    className={cn(72      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",73      className74    )}75    {...props}76  />77))78NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName79 80const NavigationMenuLink = NavigationMenuPrimitive.Link81 82const NavigationMenuViewport = React.forwardRef<83  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,84  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>85>(({ className, ...props }, ref) => (86  <div className={cn("absolute left-0 top-full flex justify-center")}>87    <NavigationMenuPrimitive.Viewport88      className={cn(89        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",90        className91      )}92      ref={ref}93      {...props}94    />95  </div>96))97NavigationMenuViewport.displayName =98  NavigationMenuPrimitive.Viewport.displayName99 100const NavigationMenuIndicator = React.forwardRef<101  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,102  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>103>(({ className, ...props }, ref) => (104  <NavigationMenuPrimitive.Indicator105    ref={ref}106    className={cn(107      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",108      className109    )}110    {...props}111  >112    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />113  </NavigationMenuPrimitive.Indicator>114))115NavigationMenuIndicator.displayName =116  NavigationMenuPrimitive.Indicator.displayName117 118export {119  navigationMenuTriggerStyle,120  NavigationMenu,121  NavigationMenuList,122  NavigationMenuItem,123  NavigationMenuContent,124  NavigationMenuTrigger,125  NavigationMenuLink,126  NavigationMenuIndicator,127  NavigationMenuViewport,128}129