shi.gg
The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
1"use client";
2
3import { cn } from "@/utils/cn";
4import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
5import { Check, ChevronRight, Circle } from "lucide-react";
6import * as React from "react";
7
8const DropdownMenu = DropdownMenuPrimitive.Root;
9
10const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
11
12const DropdownMenuGroup = DropdownMenuPrimitive.Group;
13
14const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
15
16const DropdownMenuSub = DropdownMenuPrimitive.Sub;
17
18const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
19
20const DropdownMenuSubTrigger = React.forwardRef<
21 React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
22 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
23 inset?: boolean;
24 }
25>(({ className, inset, children, ...props }, ref) => (
26 <DropdownMenuPrimitive.SubTrigger
27 ref={ref}
28 className={cn(
29 "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
30 inset && "pl-8",
31 className
32 )}
33 {...props}
34 >
35 {children}
36 <ChevronRight className="ml-auto" />
37 </DropdownMenuPrimitive.SubTrigger>
38));
39DropdownMenuSubTrigger.displayName =
40 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-lg bg-wamellow 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 origin-[--radix-dropdown-menu-content-transform-origin]",
50 className
51 )}
52 {...props}
53 />
54));
55DropdownMenuSubContent.displayName =
56 DropdownMenuPrimitive.SubContent.displayName;
57
58const DropdownMenuContent = React.forwardRef<
59 React.ElementRef<typeof DropdownMenuPrimitive.Content>,
60 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
61>(({ className, sideOffset = 4, ...props }, ref) => (
62 <DropdownMenuPrimitive.Portal>
63 <DropdownMenuPrimitive.Content
64 ref={ref}
65 sideOffset={sideOffset}
66 className={cn(
67 "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-lg bg-wamellow backdrop-brightness-50 backdrop-blur-xl p-1 text-primary-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 origin-[--radix-dropdown-menu-content-transform-origin]",
68 className
69 )}
70 {...props}
71 />
72 </DropdownMenuPrimitive.Portal>
73));
74DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
75
76const DropdownMenuItem = React.forwardRef<
77 React.ElementRef<typeof DropdownMenuPrimitive.Item>,
78 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
79 inset?: boolean;
80 }
81>(({ className, inset, ...props }, ref) => (
82 <DropdownMenuPrimitive.Item
83 ref={ref}
84 className={cn(
85 "relative flex select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-wamellow focus:text-primary-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
86 inset && "pl-8",
87 className
88 )}
89 {...props}
90 />
91));
92DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
93
94const DropdownMenuCheckboxItem = React.forwardRef<
95 React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
96 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
97>(({ className, children, checked, ...props }, ref) => (
98 <DropdownMenuPrimitive.CheckboxItem
99 ref={ref}
100 className={cn(
101 "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-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
102 className
103 )}
104 checked={checked}
105 {...props}
106 >
107 <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
108 <DropdownMenuPrimitive.ItemIndicator>
109 <Check className="h-4 w-4" />
110 </DropdownMenuPrimitive.ItemIndicator>
111 </span>
112 {children}
113 </DropdownMenuPrimitive.CheckboxItem>
114));
115DropdownMenuCheckboxItem.displayName =
116 DropdownMenuPrimitive.CheckboxItem.displayName;
117
118const DropdownMenuRadioItem = React.forwardRef<
119 React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
120 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
121>(({ className, children, ...props }, ref) => (
122 <DropdownMenuPrimitive.RadioItem
123 ref={ref}
124 className={cn(
125 "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-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
126 className
127 )}
128 {...props}
129 >
130 <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
131 <DropdownMenuPrimitive.ItemIndicator>
132 <Circle className="h-2 w-2 fill-current" />
133 </DropdownMenuPrimitive.ItemIndicator>
134 </span>
135 {children}
136 </DropdownMenuPrimitive.RadioItem>
137));
138DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
139
140const DropdownMenuLabel = React.forwardRef<
141 React.ElementRef<typeof DropdownMenuPrimitive.Label>,
142 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
143 inset?: boolean;
144 }
145>(({ className, inset, ...props }, ref) => (
146 <DropdownMenuPrimitive.Label
147 ref={ref}
148 className={cn(
149 "px-2 py-1.5 text-sm font-semibold",
150 inset && "pl-8",
151 className
152 )}
153 {...props}
154 />
155));
156DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
157
158const DropdownMenuSeparator = React.forwardRef<
159 React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
160 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
161>(({ className, ...props }, ref) => (
162 <DropdownMenuPrimitive.Separator
163 ref={ref}
164 className={cn("-mx-1 my-1 h-px bg-muted", className)}
165 {...props}
166 />
167));
168DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
169
170const DropdownMenuShortcut = ({
171 className,
172 ...props
173}: React.HTMLAttributes<HTMLSpanElement>) => {
174 return (
175 <span
176 className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
177 {...props}
178 />
179 );
180};
181DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
182
183export {
184 DropdownMenu,
185 DropdownMenuCheckboxItem,
186 DropdownMenuContent,
187 DropdownMenuGroup,
188 DropdownMenuItem,
189 DropdownMenuLabel,
190 DropdownMenuPortal,
191 DropdownMenuRadioGroup,
192 DropdownMenuRadioItem,
193 DropdownMenuSeparator,
194 DropdownMenuShortcut,
195 DropdownMenuSub,
196 DropdownMenuSubContent,
197 DropdownMenuSubTrigger,
198 DropdownMenuTrigger
199};