openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
4import { Check, ChevronRight, Circle } from "lucide-react";
5import * as React from "react";
6
7import { cn } from "../lib/utils";
8
9const ContextMenu = ContextMenuPrimitive.Root;
10
11const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
12
13const ContextMenuGroup = ContextMenuPrimitive.Group;
14
15const ContextMenuPortal = ContextMenuPrimitive.Portal;
16
17const ContextMenuSub = ContextMenuPrimitive.Sub;
18
19const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
20
21const ContextMenuSubTrigger = React.forwardRef<
22 React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
23 React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
24 inset?: boolean;
25 }
26>(({ className, inset, children, ...props }, ref) => (
27 <ContextMenuPrimitive.SubTrigger
28 ref={ref}
29 className={cn(
30 "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground 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 </ContextMenuPrimitive.SubTrigger>
39));
40ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
41
42const ContextMenuSubContent = React.forwardRef<
43 React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
44 React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
45>(({ className, ...props }, ref) => (
46 <ContextMenuPrimitive.SubContent
47 ref={ref}
48 className={cn(
49 "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",
50 className,
51 )}
52 {...props}
53 />
54));
55ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
56
57const ContextMenuContent = React.forwardRef<
58 React.ElementRef<typeof ContextMenuPrimitive.Content>,
59 React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
60>(({ className, ...props }, ref) => (
61 <ContextMenuPrimitive.Portal>
62 <ContextMenuPrimitive.Content
63 ref={ref}
64 className={cn(
65 "bg-popover text-popover-foreground animate-in fade-in-80 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",
66 className,
67 )}
68 {...props}
69 />
70 </ContextMenuPrimitive.Portal>
71));
72ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
73
74const ContextMenuItem = React.forwardRef<
75 React.ElementRef<typeof ContextMenuPrimitive.Item>,
76 React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
77 inset?: boolean;
78 }
79>(({ className, inset, ...props }, ref) => (
80 <ContextMenuPrimitive.Item
81 ref={ref}
82 className={cn(
83 "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 data-disabled:pointer-events-none data-disabled:opacity-50",
84 inset && "pl-8",
85 className,
86 )}
87 {...props}
88 />
89));
90ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
91
92const ContextMenuCheckboxItem = React.forwardRef<
93 React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
94 React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
95>(({ className, children, checked, ...props }, ref) => (
96 <ContextMenuPrimitive.CheckboxItem
97 ref={ref}
98 className={cn(
99 "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 data-disabled:pointer-events-none data-disabled:opacity-50",
100 className,
101 )}
102 checked={checked}
103 {...props}
104 >
105 <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
106 <ContextMenuPrimitive.ItemIndicator>
107 <Check className="h-4 w-4" />
108 </ContextMenuPrimitive.ItemIndicator>
109 </span>
110 {children}
111 </ContextMenuPrimitive.CheckboxItem>
112));
113ContextMenuCheckboxItem.displayName =
114 ContextMenuPrimitive.CheckboxItem.displayName;
115
116const ContextMenuRadioItem = React.forwardRef<
117 React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
118 React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
119>(({ className, children, ...props }, ref) => (
120 <ContextMenuPrimitive.RadioItem
121 ref={ref}
122 className={cn(
123 "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 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 <ContextMenuPrimitive.ItemIndicator>
130 <Circle className="h-2 w-2 fill-current" />
131 </ContextMenuPrimitive.ItemIndicator>
132 </span>
133 {children}
134 </ContextMenuPrimitive.RadioItem>
135));
136ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
137
138const ContextMenuLabel = React.forwardRef<
139 React.ElementRef<typeof ContextMenuPrimitive.Label>,
140 React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
141 inset?: boolean;
142 }
143>(({ className, inset, ...props }, ref) => (
144 <ContextMenuPrimitive.Label
145 ref={ref}
146 className={cn(
147 "text-foreground px-2 py-1.5 text-sm font-semibold",
148 inset && "pl-8",
149 className,
150 )}
151 {...props}
152 />
153));
154ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
155
156const ContextMenuSeparator = React.forwardRef<
157 React.ElementRef<typeof ContextMenuPrimitive.Separator>,
158 React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
159>(({ className, ...props }, ref) => (
160 <ContextMenuPrimitive.Separator
161 ref={ref}
162 className={cn("bg-border -mx-1 my-1 h-px", className)}
163 {...props}
164 />
165));
166ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
167
168const ContextMenuShortcut = ({
169 className,
170 ...props
171}: React.HTMLAttributes<HTMLSpanElement>) => {
172 return (
173 <span
174 className={cn(
175 "text-muted-foreground ml-auto text-xs tracking-widest",
176 className,
177 )}
178 {...props}
179 />
180 );
181};
182ContextMenuShortcut.displayName = "ContextMenuShortcut";
183
184export {
185 ContextMenu,
186 ContextMenuTrigger,
187 ContextMenuContent,
188 ContextMenuItem,
189 ContextMenuCheckboxItem,
190 ContextMenuRadioItem,
191 ContextMenuLabel,
192 ContextMenuSeparator,
193 ContextMenuShortcut,
194 ContextMenuGroup,
195 ContextMenuPortal,
196 ContextMenuSub,
197 ContextMenuSubContent,
198 ContextMenuSubTrigger,
199 ContextMenuRadioGroup,
200};