openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import type { DialogProps } from "@radix-ui/react-dialog";
4import { Command as CommandPrimitive } from "cmdk";
5import { Search } from "lucide-react";
6import * as React from "react";
7
8import { cn } from "../lib/utils";
9import { Dialog, DialogContent } from "./dialog";
10
11const Command = React.forwardRef<
12 React.ElementRef<typeof CommandPrimitive>,
13 React.ComponentPropsWithoutRef<typeof CommandPrimitive>
14>(({ className, ...props }, ref) => (
15 <CommandPrimitive
16 ref={ref}
17 className={cn(
18 "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
19 className
20 )}
21 {...props}
22 />
23));
24Command.displayName = CommandPrimitive.displayName;
25
26type CommandDialogProps = DialogProps;
27
28const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
29 return (
30 <Dialog {...props}>
31 <DialogContent className="overflow-hidden p-0 shadow-2xl">
32 <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
33 {children}
34 </Command>
35 </DialogContent>
36 </Dialog>
37 );
38};
39
40const CommandInput = React.forwardRef<
41 React.ElementRef<typeof CommandPrimitive.Input>,
42 React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
43>(({ className, ...props }, ref) => (
44 <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
45 <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
46 <CommandPrimitive.Input
47 ref={ref}
48 className={cn(
49 "placeholder:text-foreground-muted flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
50 className
51 )}
52 {...props}
53 />
54 </div>
55));
56
57CommandInput.displayName = CommandPrimitive.Input.displayName;
58
59const CommandList = React.forwardRef<
60 React.ElementRef<typeof CommandPrimitive.List>,
61 React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
62>(({ className, ...props }, ref) => (
63 <CommandPrimitive.List
64 ref={ref}
65 className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
66 {...props}
67 />
68));
69
70CommandList.displayName = CommandPrimitive.List.displayName;
71
72const CommandEmpty = React.forwardRef<
73 React.ElementRef<typeof CommandPrimitive.Empty>,
74 React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
75>((props, ref) => (
76 <CommandPrimitive.Empty
77 ref={ref}
78 className="py-6 text-center text-sm"
79 {...props}
80 />
81));
82
83CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
84
85const CommandGroup = React.forwardRef<
86 React.ElementRef<typeof CommandPrimitive.Group>,
87 React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
88>(({ className, ...props }, ref) => (
89 <CommandPrimitive.Group
90 ref={ref}
91 className={cn(
92 "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
93 className
94 )}
95 {...props}
96 />
97));
98
99CommandGroup.displayName = CommandPrimitive.Group.displayName;
100
101const CommandSeparator = React.forwardRef<
102 React.ElementRef<typeof CommandPrimitive.Separator>,
103 React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
104>(({ className, ...props }, ref) => (
105 <CommandPrimitive.Separator
106 ref={ref}
107 className={cn("bg-border -mx-1 h-px", className)}
108 {...props}
109 />
110));
111CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
112
113const CommandItem = React.forwardRef<
114 React.ElementRef<typeof CommandPrimitive.Item>,
115 React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
116>(({ className, ...props }, ref) => (
117 <CommandPrimitive.Item
118 ref={ref}
119 className={cn(
120 "aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
121 className
122 )}
123 {...props}
124 />
125));
126
127CommandItem.displayName = CommandPrimitive.Item.displayName;
128
129const CommandShortcut = ({
130 className,
131 ...props
132}: React.HTMLAttributes<HTMLSpanElement>) => {
133 return (
134 <span
135 className={cn(
136 "text-muted-foreground ml-auto text-xs tracking-widest",
137 className
138 )}
139 {...props}
140 />
141 );
142};
143CommandShortcut.displayName = "CommandShortcut";
144
145const CommandLoading = React.forwardRef<
146 React.ElementRef<typeof CommandPrimitive.Loading>,
147 React.ComponentPropsWithoutRef<typeof CommandPrimitive.Loading>
148>(({ className, ...props }, ref) => (
149 <CommandPrimitive.Loading
150 ref={ref}
151 className={cn("px-2 py-1.5 text-sm", className)}
152 {...props}
153 />
154));
155CommandLoading.displayName = CommandPrimitive.Loading.displayName;
156
157export {
158 Command,
159 CommandDialog,
160 CommandInput,
161 CommandList,
162 CommandLoading,
163 CommandEmpty,
164 CommandGroup,
165 CommandItem,
166 CommandShortcut,
167 CommandSeparator,
168};