Command

1"use client";
2 
3import * as React from "react";
4import { Command as CommandPrimitive } from "cmdk";
5import { Search } 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  showCloseButton = true,
38  ...props
39}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
40  title?: string;
41  description?: string;
42  className?: string;
43  showCloseButton?: boolean;
44  children?: React.ReactNode;
45}) {
46  return (
47    <Dialog {...props}>
48      <DialogHeader className="sr-only">
49        <DialogTitle>{title}</DialogTitle>
50        <DialogDescription>{description}</DialogDescription>
51      </DialogHeader>
52      <DialogContent
53        className={cn("overflow-hidden p-0", className)}
54        showCloseButton={showCloseButton}
55      >
56        <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]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
57          {children}
58        </Command>
59      </DialogContent>
60    </Dialog>
61  );
62}
63 
64function CommandInput({
65  className,
66  ...props
67}: React.ComponentProps<typeof CommandPrimitive.Input>) {
68  return (
69    <div
70      data-slot="command-input-wrapper"
71      className="flex h-9 items-center gap-2 border-b px-3"
72    >
73      <Search className="size-4 shrink-0 opacity-50" />
74      <CommandPrimitive.Input
75        data-slot="command-input"
76        className={cn(
77          "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",
78          className,
79        )}
80        {...props}
81      />
82    </div>
83  );
84}
85 
86function CommandList({
87  className,
88  ...props
89// … truncated