Command

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