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