Command

1"use client";
2
3import { ComponentProps, ReactNode } from "react";
4
5import { Command as CommandPrimitive } from "cmdk";
6
7import { cn } from "@/lib/utils";
8import {
9  Dialog,
10  DialogContent,
11  DialogDescription,
12  DialogHeader,
13  DialogTitle
14} from "@/components/ui/dialog";
15import { InputGroup, InputGroupAddon } from "@/components/ui/input-group";
16import { SearchIcon, CheckIcon } from "lucide-react";
17
18function Command({
19  className,
20  ...props
21}: ComponentProps<typeof CommandPrimitive>) {
22  return (
23    <CommandPrimitive
24      data-slot="command"
25      className={cn(
26        "bg-card text-popover-foreground flex size-full flex-col overflow-hidden rounded-lg! p-4 shadow-[0_4px_24px_0_rgba(62,57,107,.18)]",
27        className
28      )}
29      {...props}
30    />
31  );
32}
33
34function CommandDialog({
35  title = "Command Palette",
36  description = "Search for a command to run...",
37  children,
38  className,
39  showCloseButton = false,
40  ...props
41}: Omit<ComponentProps<typeof Dialog>, "children"> & {
42  title?: string;
43  description?: string;
44  className?: string;
45  showCloseButton?: boolean;
46  children: ReactNode;
47}) {
48  return (
49    <Dialog {...props}>
50      <DialogHeader className="sr-only">
51        <DialogTitle>{title}</DialogTitle>
52        <DialogDescription>{description}</DialogDescription>
53      </DialogHeader>
54      <DialogContent
55        className={cn(
56          "top-1/3 translate-y-0 overflow-hidden rounded-lg! p-0",
57          className
58        )}
59        showCloseButton={showCloseButton}
60      >
61        {children}
62      </DialogContent>
63    </Dialog>
64  );
65}
66
67function CommandInput({
68  className,
69  ...props
70}: ComponentProps<typeof CommandPrimitive.Input>) {
71  return (
72    <div data-slot="command-input-wrapper" className="p-1 pb-0">
73      <InputGroup className="border rounded-lg flex text-base py-[.8rem] px-3 w-full placeholder:text-[#bec8d0] disabled:bg-secondary-200/10 disabled:pointer-events-none focus:outline-none focus:border-primary dark:focus:border-primary border-border bg-input *:data-[slot=input-group-addon]:pl-2!">
74        <CommandPrimitive.Input
75          data-slot="command-input"
76          className={cn(
77            "w-full text-base outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
78            className
79          )}
80          {...props}
81        />
82        <InputGroupAddon>
83          <SearchIcon className="size-4 shrink-0 opacity-50" />
84// … truncated