gui.do
Barazo default frontend
barazo.forum
1'use client'
2
3import * as React from 'react'
4import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
5import { Check, CaretRight, Circle } from '@phosphor-icons/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 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',
31 inset && 'pl-8',
32 className
33 )}
34 {...props}
35 >
36 {children}
37 <span className="ml-auto">
38 <CaretRight size={16} aria-hidden="true" />
39 </span>
40 </DropdownMenuPrimitive.SubTrigger>
41))
42DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
43
44const DropdownMenuSubContent = React.forwardRef<
45 React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
46 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
47>(({ className, ...props }, ref) => (
48 <DropdownMenuPrimitive.SubContent
49 ref={ref}
50 className={cn(
51 '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 origin-[--radix-dropdown-menu-content-transform-origin]',
52 className
53 )}
54 {...props}
55 />
56))
57DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
58
59const DropdownMenuContent = React.forwardRef<
60 React.ElementRef<typeof DropdownMenuPrimitive.Content>,
61 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
62>(({ className, sideOffset = 4, ...props }, ref) => (
63 <DropdownMenuPrimitive.Portal>
64 <DropdownMenuPrimitive.Content
65 ref={ref}
66 sideOffset={sideOffset}
67 className={cn(
68 'z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-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 origin-[--radix-dropdown-menu-content-transform-origin]',
69 className
70 )}
71 {...props}
72 />
73 </DropdownMenuPrimitive.Portal>
74))
75DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
76
77const DropdownMenuItem = React.forwardRef<
78 React.ElementRef<typeof DropdownMenuPrimitive.Item>,
79 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
80 inset?: boolean
81 }
82>(({ className, inset, ...props }, ref) => (
83 <DropdownMenuPrimitive.Item
84 ref={ref}
85 className={cn(
86 'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
87 inset && 'pl-8',
88 className
89 )}
90 {...props}
91 />
92))
93DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
94
95const DropdownMenuCheckboxItem = React.forwardRef<
96 React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
97 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
98>(({ className, children, checked, ...props }, ref) => (
99 <DropdownMenuPrimitive.CheckboxItem
100 ref={ref}
101 className={cn(
102 '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',
103 className
104 )}
105 checked={checked}
106 {...props}
107 >
108 <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
109 <DropdownMenuPrimitive.ItemIndicator>
110 <Check size={16} />
111 </DropdownMenuPrimitive.ItemIndicator>
112 </span>
113 {children}
114 </DropdownMenuPrimitive.CheckboxItem>
115))
116DropdownMenuCheckboxItem.displayName = 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 size={8} weight="fill" />
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('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
149 {...props}
150 />
151))
152DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
153
154const DropdownMenuSeparator = React.forwardRef<
155 React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
156 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
157>(({ className, ...props }, ref) => (
158 <DropdownMenuPrimitive.Separator
159 ref={ref}
160 className={cn('-mx-1 my-1 h-px bg-muted', className)}
161 {...props}
162 />
163))
164DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
165
166const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
167 return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
168}
169DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
170
171export {
172 DropdownMenu,
173 DropdownMenuTrigger,
174 DropdownMenuContent,
175 DropdownMenuItem,
176 DropdownMenuCheckboxItem,
177 DropdownMenuRadioItem,
178 DropdownMenuLabel,
179 DropdownMenuSeparator,
180 DropdownMenuShortcut,
181 DropdownMenuGroup,
182 DropdownMenuPortal,
183 DropdownMenuSub,
184 DropdownMenuSubContent,
185 DropdownMenuSubTrigger,
186 DropdownMenuRadioGroup,
187}