Command

1"use client"
2 
3import * as React from "react"
4import { Command as CommandPrimitive } from "cmdk"
5 
6import { cn } from "@/lib/utils"
7import {
8  Dialog,
9  DialogContent,
10  DialogDescription,
11  DialogHeader,
12  DialogTitle,
13} from "@/components/ui/dialog"
14import {
15  InputGroup,
16  InputGroupAddon,
17} from "@/components/ui/input-group"
18import { SearchIcon, CheckIcon } from "lucide-react"
19 
20function Command({
21  className,
22  ...props
23}: React.ComponentProps<typeof CommandPrimitive>) {
24  return (
25    <CommandPrimitive
26      data-slot="command"
27      className={cn(
28        "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
29        className
30      )}
31      {...props}
32    />
33  )
34}
35 
36function CommandDialog({
37  title = "Command Palette",
38  description = "Search for a command to run...",
39  children,
40  className,
41  showCloseButton = false,
42  ...props
43}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
44  title?: string
45  description?: string
46  className?: string
47  showCloseButton?: boolean
48  children: React.ReactNode
49}) {
50  return (
51    <Dialog {...props}>
52      <DialogHeader className="sr-only">
53        <DialogTitle>{title}</DialogTitle>
54        <DialogDescription>{description}</DialogDescription>
55      </DialogHeader>
56      <DialogContent
57        className={cn(
58          "top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0",
59          className
60        )}
61        showCloseButton={showCloseButton}
62      >
63        <Command>{children}</Command>
64      </DialogContent>
65    </Dialog>
66  )
67}
68 
69function CommandInput({
70  className,
71  ...props
72}: React.ComponentProps<typeof CommandPrimitive.Input>) {
73  return (
74    <div data-slot="command-input-wrapper" className="p-1 pb-0">
75      <InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
76        <CommandPrimitive.Input
77          data-slot="command-input"
78          className={cn(
79            "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
80            className
81          )}
82          {...props}
83        />
84        <InputGroupAddon>
85          <SearchIcon className="size-4 shrink-0 opacity-50" />
86        </InputGroupAddon>
87      </InputGroup>
88    </div>
89  )
90}
91 
92function CommandList({
93  className,
94  ...props
95}: React.ComponentProps<typeof CommandPrimitive.List>) {
96  return (
97    <CommandPrimitive.List
98      data-slot="command-list"
99      className={cn(
100// … truncated