command

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