CoolFace
Apppublic

Leon4gr45/builder

sourceHugging Facemitupdated 2d agoView on Hugging Face
0likes
context-menu.tsx200 linesDownload Raw Back to ui
1'use client'2 3import * as React from 'react'4import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'5import { Check, ChevronRight, Circle } from 'lucide-react'6 7import { cn } from '@/lib/utils'8 9const ContextMenu = ContextMenuPrimitive.Root10 11const ContextMenuTrigger = ContextMenuPrimitive.Trigger12 13const ContextMenuGroup = ContextMenuPrimitive.Group14 15const ContextMenuPortal = ContextMenuPrimitive.Portal16 17const ContextMenuSub = ContextMenuPrimitive.Sub18 19const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup20 21const ContextMenuSubTrigger = React.forwardRef<22  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,23  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {24    inset?: boolean25  }26>(({ className, inset, children, ...props }, ref) => (27  <ContextMenuPrimitive.SubTrigger28    ref={ref}29    className={cn(30      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',31      inset && 'pl-8',32      className33    )}34    {...props}35  >36    {children}37    <ChevronRight className="ml-auto h-4 w-4" />38  </ContextMenuPrimitive.SubTrigger>39))40ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName41 42const ContextMenuSubContent = React.forwardRef<43  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,44  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>45>(({ className, ...props }, ref) => (46  <ContextMenuPrimitive.SubContent47    ref={ref}48    className={cn(49      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',50      className51    )}52    {...props}53  />54))55ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName56 57const ContextMenuContent = React.forwardRef<58  React.ElementRef<typeof ContextMenuPrimitive.Content>,59  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>60>(({ className, ...props }, ref) => (61  <ContextMenuPrimitive.Portal>62    <ContextMenuPrimitive.Content63      ref={ref}64      className={cn(65        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',66        className67      )}68      {...props}69    />70  </ContextMenuPrimitive.Portal>71))72ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName73 74const ContextMenuItem = React.forwardRef<75  React.ElementRef<typeof ContextMenuPrimitive.Item>,76  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {77    inset?: boolean78  }79>(({ className, inset, ...props }, ref) => (80  <ContextMenuPrimitive.Item81    ref={ref}82    className={cn(83      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',84      inset && 'pl-8',85      className86    )}87    {...props}88  />89))90ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName91 92const ContextMenuCheckboxItem = React.forwardRef<93  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,94  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>95>(({ className, children, checked, ...props }, ref) => (96  <ContextMenuPrimitive.CheckboxItem97    ref={ref}98    className={cn(99      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',100      className101    )}102    checked={checked}103    {...props}104  >105    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">106      <ContextMenuPrimitive.ItemIndicator>107        <Check className="h-4 w-4" />108      </ContextMenuPrimitive.ItemIndicator>109    </span>110    {children}111  </ContextMenuPrimitive.CheckboxItem>112))113ContextMenuCheckboxItem.displayName =114  ContextMenuPrimitive.CheckboxItem.displayName115 116const ContextMenuRadioItem = React.forwardRef<117  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,118  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>119>(({ className, children, ...props }, ref) => (120  <ContextMenuPrimitive.RadioItem121    ref={ref}122    className={cn(123      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',124      className125    )}126    {...props}127  >128    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">129      <ContextMenuPrimitive.ItemIndicator>130        <Circle className="h-2 w-2 fill-current" />131      </ContextMenuPrimitive.ItemIndicator>132    </span>133    {children}134  </ContextMenuPrimitive.RadioItem>135))136ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName137 138const ContextMenuLabel = React.forwardRef<139  React.ElementRef<typeof ContextMenuPrimitive.Label>,140  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {141    inset?: boolean142  }143>(({ className, inset, ...props }, ref) => (144  <ContextMenuPrimitive.Label145    ref={ref}146    className={cn(147      'px-2 py-1.5 text-sm font-semibold text-foreground',148      inset && 'pl-8',149      className150    )}151    {...props}152  />153))154ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName155 156const ContextMenuSeparator = React.forwardRef<157  React.ElementRef<typeof ContextMenuPrimitive.Separator>,158  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>159>(({ className, ...props }, ref) => (160  <ContextMenuPrimitive.Separator161    ref={ref}162    className={cn('-mx-1 my-1 h-px bg-border', className)}163    {...props}164  />165))166ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName167 168const ContextMenuShortcut = ({169  className,170  ...props171}: React.HTMLAttributes<HTMLSpanElement>) => {172  return (173    <span174      className={cn(175        'ml-auto text-xs tracking-widest text-muted-foreground',176        className177      )}178      {...props}179    />180  )181}182ContextMenuShortcut.displayName = 'ContextMenuShortcut'183 184export {185  ContextMenu,186  ContextMenuTrigger,187  ContextMenuContent,188  ContextMenuItem,189  ContextMenuCheckboxItem,190  ContextMenuRadioItem,191  ContextMenuLabel,192  ContextMenuSeparator,193  ContextMenuShortcut,194  ContextMenuGroup,195  ContextMenuPortal,196  ContextMenuSub,197  ContextMenuSubContent,198  ContextMenuSubTrigger,199  ContextMenuRadioGroup,200}