Fork of atp.tools as a universal profile for people on the ATmosphere
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 gap-2 select-none items-center 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 <ChevronRight className="ml-auto" />
38 </DropdownMenuPrimitive.SubTrigger>
39))
40DropdownMenuSubTrigger.displayName =
41 DropdownMenuPrimitive.SubTrigger.displayName
42
43const DropdownMenuSubContent = React.forwardRef<
44 React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
45 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
46>(({ className, ...props }, ref) => (
47 <DropdownMenuPrimitive.SubContent
48 ref={ref}
49 className={cn(
50 "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",
51 className
52 )}
53 {...props}
54 />
55))
56DropdownMenuSubContent.displayName =
57 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 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",
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 className="h-4 w-4" />
111 </DropdownMenuPrimitive.ItemIndicator>
112 </span>
113 {children}
114 </DropdownMenuPrimitive.CheckboxItem>
115))
116DropdownMenuCheckboxItem.displayName =
117 DropdownMenuPrimitive.CheckboxItem.displayName
118
119const DropdownMenuRadioItem = React.forwardRef<
120 React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
121 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
122>(({ className, children, ...props }, ref) => (
123 <DropdownMenuPrimitive.RadioItem
124 ref={ref}
125 className={cn(
126 "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",
127 className
128 )}
129 {...props}
130 >
131 <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
132 <DropdownMenuPrimitive.ItemIndicator>
133 <Circle className="h-2 w-2 fill-current" />
134 </DropdownMenuPrimitive.ItemIndicator>
135 </span>
136 {children}
137 </DropdownMenuPrimitive.RadioItem>
138))
139DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
140
141const DropdownMenuLabel = React.forwardRef<
142 React.ElementRef<typeof DropdownMenuPrimitive.Label>,
143 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
144 inset?: boolean
145 }
146>(({ className, inset, ...props }, ref) => (
147 <DropdownMenuPrimitive.Label
148 ref={ref}
149 className={cn(
150 "px-2 py-1.5 text-sm font-semibold",
151 inset && "pl-8",
152 className
153 )}
154 {...props}
155 />
156))
157DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
158
159const DropdownMenuSeparator = React.forwardRef<
160 React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
161 React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
162>(({ className, ...props }, ref) => (
163 <DropdownMenuPrimitive.Separator
164 ref={ref}
165 className={cn("-mx-1 my-1 h-px bg-muted", className)}
166 {...props}
167 />
168))
169DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
170
171const DropdownMenuShortcut = ({
172 className,
173 ...props
174}: React.HTMLAttributes<HTMLSpanElement>) => {
175 return (
176 <span
177 className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
178 {...props}
179 />
180 )
181}
182DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
183
184export {
185 DropdownMenu,
186 DropdownMenuTrigger,
187 DropdownMenuContent,
188 DropdownMenuItem,
189 DropdownMenuCheckboxItem,
190 DropdownMenuRadioItem,
191 DropdownMenuLabel,
192 DropdownMenuSeparator,
193 DropdownMenuShortcut,
194 DropdownMenuGroup,
195 DropdownMenuPortal,
196 DropdownMenuSub,
197 DropdownMenuSubContent,
198 DropdownMenuSubTrigger,
199 DropdownMenuRadioGroup,
200}