1"use client"
2
3import * as React from "react"
4import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
5import { Check, ChevronRight, Circle } from "lucide-react"
6
7import { cn } from "@/lib/utils"
8
9const DropdownMenu = DropdownMenuPrimitive.Root
10
11const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
12
13const DropdownMenuGroup = DropdownMenuPrimitive.Group
14
15const DropdownMenuPortal = DropdownMenuPrimitive.Portal
16
17const DropdownMenuSub = DropdownMenuPrimitive.Sub
18
19const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
20
21const DropdownMenuSubTrigger = React.forwardRef<
22 React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
23 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
24 inset?: boolean
25 }
26>(({ className, inset, children, ...props }, ref) => (
27 <DropdownMenuPrimitive.SubTrigger
28 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-gray-700 data-[state=open]:bg-gray-700",
31 inset && "pl-8",
32 className,
33 )}
34 {...props}
35 >
36 {children}
37 <ChevronRight className="ml-auto h-4 w-4" />
38 </DropdownMenuPrimitive.SubTrigger>
39))
40DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
41
42const DropdownMenuSubContent = React.forwardRef<
43 React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
44 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
45>(({ className, ...props }, ref) => (
46 <DropdownMenuPrimitive.SubContent
47 ref={ref}
48 className={cn(
49 "z-50 min-w-[8rem] overflow-hidden rounded-md border border-gray-700 bg-gray-800 p-1 text-gray-200 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 className,
51 )}
52 {...props}
53 />
54))
55DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
56
57const DropdownMenuContent = React.forwardRef<
58 React.ElementRef<typeof DropdownMenuPrimitive.Content>,
59 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
60>(({ className, sideOffset = 4, ...props }, ref) => (
61 <DropdownMenuPrimitive.Portal>
62 <DropdownMenuPrimitive.Content
63 ref={ref}
64 sideOffset={sideOffset}
65 className={cn(
66 "z-50 min-w-[8rem] overflow-hidden rounded-md border border-gray-700 bg-gray-800 p-1 text-gray-200 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",
67 className,
68 )}
69 {...props}
70 />
71 </DropdownMenuPrimitive.Portal>
72))
73DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
74
75const DropdownMenuItem = React.forwardRef<
76 React.ElementRef<typeof DropdownMenuPrimitive.Item>,
77 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
78 inset?: boolean
79 }
80>(({ className, inset, ...props }, ref) => (
81 <DropdownMenuPrimitive.Item
82 ref={ref}
83 className={cn(
84 "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-gray-700 focus:text-gray-50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-gray-700",
85 inset && "pl-8",
86 className,
87 )}
88 {...props}
89 />
90))
91DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
92
93const DropdownMenuCheckboxItem = React.forwardRef<
94 React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
95 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
96>(({ className, children, checked, ...props }, ref) => (
97 <DropdownMenuPrimitive.CheckboxItem
98 ref={ref}
99 className={cn(
100 "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-gray-700 focus:text-gray-50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
101 className,
102 )}
103 checked={checked}
104 {...props}
105 >
106 <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
107 <DropdownMenuPrimitive.ItemIndicator>
108 <Check className="h-4 w-4" />
109 </DropdownMenuPrimitive.ItemIndicator>
110 </span>
111 {children}
112 </DropdownMenuPrimitive.CheckboxItem>
113))
114DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
115
116const DropdownMenuRadioItem = React.forwardRef<
117 React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
118 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
119>(({ className, children, ...props }, ref) => (
120 <DropdownMenuPrimitive.RadioItem
121 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 transition-colors focus:bg-gray-700 focus:text-gray-50 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
124 className,
125 )}
126 {...props}
127 >
128 <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
129 <DropdownMenuPrimitive.ItemIndicator>
130 <Circle className="h-2 w-2 fill-current" />
131 </DropdownMenuPrimitive.ItemIndicator>
132 </span>
133 {children}
134 </DropdownMenuPrimitive.RadioItem>
135))
136DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
137
138const DropdownMenuLabel = React.forwardRef<
139 React.ElementRef<typeof DropdownMenuPrimitive.Label>,
140 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
141 inset?: boolean
142 }
143>(({ className, inset, ...props }, ref) => (
144 <DropdownMenuPrimitive.Label
145 ref={ref}
146 className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
147 {...props}
148 />
149))
150DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
151
152const DropdownMenuSeparator = React.forwardRef<
153 React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
154 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
155>(({ className, ...props }, ref) => (
156 <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-gray-700", className)} {...props} />
157))
158DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
159
160const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
161 return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
162}
163DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
164
165export {
166 DropdownMenu,
167 DropdownMenuTrigger,
168 DropdownMenuContent,
169 DropdownMenuItem,
170 DropdownMenuCheckboxItem,
171 DropdownMenuRadioItem,
172 DropdownMenuLabel,
173 DropdownMenuSeparator,
174 DropdownMenuShortcut,
175 DropdownMenuGroup,
176 DropdownMenuPortal,
177 DropdownMenuSub,
178 DropdownMenuSubContent,
179 DropdownMenuSubTrigger,
180 DropdownMenuRadioGroup,
181}