Command

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