openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
4import { Check, ChevronRight, Circle } from "lucide-react";
5import * as React from "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 "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden",
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 =
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 "bg-popover text-popover-foreground 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 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
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 "bg-popover text-popover-foreground 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 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md",
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 "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors data-disabled:pointer-events-none data-disabled:opacity-50",
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 "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors 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 "focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors 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("bg-muted -mx-1 my-1 h-px", 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};