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        "bg-popover text-popover-foreground p-1 flex size-full flex-col overflow-hidden",
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}: React.ComponentProps<typeof Dialog> & {
44  title?: string
45  description?: string
46  className?: string
47  showCloseButton?: boolean
48}) {
49  return (
50    <Dialog {...props}>
51      <DialogHeader className="sr-only">
52        <DialogTitle>{title}</DialogTitle>
53        <DialogDescription>{description}</DialogDescription>
54      </DialogHeader>
55      <DialogContent
56        className={cn(
57          "top-1/3 translate-y-0 overflow-hidden p-0",
58          className
59        )}
60        showCloseButton={showCloseButton}
61      >
62        {children}
63      </DialogContent>
64    </Dialog>
65  )
66}
67 
68function CommandInput({
69  className,
70  ...props
71}: React.ComponentProps<typeof CommandPrimitive.Input>) {
72  return (
73    <div data-slot="command-input-wrapper" className="p-1 pb-0">
74      <InputGroup className="bg-input/30 border-input/30 h-8! shadow-none! *:data-[slot=input-group-addon]:pl-2!">
75        <CommandPrimitive.Input
76          data-slot="command-input"
77          className={cn(
78            "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
79            className
80          )}
81          {...props}
82        />
83        <InputGroupAddon>
84          <SearchIcon className="size-4 shrink-0 opacity-50" />
85        </InputGroupAddon>
86      </InputGroup>
87    </div>
88  )
89}
90 
91function CommandList({
92  className,
93  ...props
94}: React.ComponentProps<typeof CommandPrimitive.List>) {
95  return (
96    <CommandPrimitive.List
97      data-slot="command-list"
98      className={cn(
99        "no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto",
100        className
101      )}
102      {...props}
103    />
104// … truncated