command

1"use client"
2 
3import {
4  Dialog,
5  DialogContent,
6  DialogDescription,
7  DialogHeader,
8  DialogTitle,
9} from "@/components/ui/dialog"
10import { cn } from "@/lib/utils"
11import { Command as CommandPrimitive } from "cmdk"
12import { SearchIcon } from "lucide-react"
13import * as React from "react"
14 
15function Command({
16  className,
17  ...props
18}: React.ComponentProps<typeof CommandPrimitive>) {
19  return (
20    <CommandPrimitive
21      data-slot="command"
22      className={cn(
23        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
24        className,
25      )}
26      {...props}
27    />
28  )
29}
30 
31function CommandDialog({
32  title = "Command Palette",
33  description = "Search for a command to run...",
34  children,
35  ...props
36}: React.ComponentProps<typeof Dialog> & {
37  title?: string
38  description?: string
39}) {
40  return (
41    <Dialog {...props}>
42      <DialogHeader className="sr-only">
43        <DialogTitle>{title}</DialogTitle>
44        <DialogDescription>{description}</DialogDescription>
45      </DialogHeader>
46      <DialogContent className="overflow-hidden p-0">
47        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[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">
48          {children}
49        </Command>
50      </DialogContent>
51    </Dialog>
52  )
53}
54 
55function CommandInput({
56  className,
57  ...props
58}: React.ComponentProps<typeof CommandPrimitive.Input>) {
59  return (
60    <div
61      data-slot="command-input-wrapper"
62      className="flex h-9 items-center gap-2 border-b px-3"
63    >
64      <SearchIcon className="size-4 shrink-0 opacity-50" />
65      <CommandPrimitive.Input
66        data-slot="command-input"
67        className={cn(
68          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
69          className,
70        )}
71        {...props}
72      />
73    </div>
74  )
75}
76 
77function CommandList({
78  className,
79  ...props
80}: React.ComponentProps<typeof CommandPrimitive.List>) {
81  return (
82    <CommandPrimitive.List
83      data-slot="command-list"
84      className={cn(
85// … truncated