command

1"use client"
2 
3import * as React from "react"
4import { Command as CommandPrimitive } from "cmdk"
5import { 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"
15 
16function Command({
17  className,
18  ...props
19}: React.ComponentProps<typeof CommandPrimitive>) {
20  return (
21    <CommandPrimitive
22      data-slot="command"
23      className={cn(
24        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
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  className,
37  ...props
38}: React.ComponentProps<typeof Dialog> & {
39  title?: string
40  description?: string
41  className?: string
42}) {
43  return (
44    <Dialog {...props}>
45      <DialogHeader className="sr-only">
46        <DialogTitle>{title}</DialogTitle>
47        <DialogDescription>{description}</DialogDescription>
48      </DialogHeader>
49      <DialogContent className={cn("overflow-hidden p-0", className)}>
50        <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">
51          {children}
52        </Command>
53      </DialogContent>
54    </Dialog>
55  )
56}
57 
58function CommandInput({
59  className,
60  ...props
61}: React.ComponentProps<typeof CommandPrimitive.Input>) {
62  return (
63    <div
64      data-slot="command-input-wrapper"
65      className="flex h-9 items-center gap-2 border-b px-3 "
66    >
67      <SearchIcon className="size-4 shrink-0 opacity-50" />
68      <CommandPrimitive.Input
69        data-slot="command-input"
70        className={cn(
71          "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",
72          className
73        )}
74        {...props}
75      />
76    </div>
77  )
78}
79 
80function CommandList({
81  className,
82  ...props
83}: React.ComponentProps<typeof CommandPrimitive.List>) {
84  return (
85    <CommandPrimitive.List
86      data-slot="command-list"
87      className={cn(
88// … truncated