Command

1"use client";
2 
3import { Icon } from "@/lib/icon";
4import { mdiClose, mdiMagnify } from "@mdi/js";
5import { Command as CommandPrimitive } from "cmdk";
6import { Dialog as DialogPrimitive } from "radix-ui";
7import * as React from "react";
8 
9import { Button } from "@/components/ui/button";
10import {
11  Dialog,
12  DialogContent,
13  DialogDescription,
14  DialogHeader,
15  DialogTitle,
16} from "@/components/ui/dialog";
17import { cn } from "@/lib/utils";
18 
19function Command({
20  className,
21  ...props
22}: React.ComponentProps<typeof CommandPrimitive>) {
23  return (
24    <CommandPrimitive
25      data-slot="command"
26      className={cn(
27        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
28        className,
29      )}
30      {...props}
31    />
32  );
33}
34 
35function CommandDialog({
36  title = "Command Palette",
37  description = "Search for a command to run...",
38  children,
39  ...props
40}: React.ComponentProps<typeof Dialog> & {
41  title?: string;
42  description?: string;
43}) {
44  return (
45    <Dialog {...props}>
46      <DialogHeader className="sr-only">
47        <DialogTitle>{title}</DialogTitle>
48        <DialogDescription>{description}</DialogDescription>
49      </DialogHeader>
50      <DialogContent className="overflow-hidden p-0">
51        <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]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
52          {children}
53          <DialogPrimitive.Close style={{ display: "none" }} />
54        </Command>
55      </DialogContent>
56    </Dialog>
57  );
58}
59 
60function CommandInput({
61  className,
62  ...props
63}: React.ComponentProps<typeof CommandPrimitive.Input>) {
64  const [value, setValue] = React.useState("");
65 
66  const handleClear = () => {
67    setValue("");
68  };
69 
70  return (
71    <div data-slot="command-input-wrapper" className="relative my-2 px-3">
72      <CommandPrimitive.Input
73        value={value}
74        onValueChange={setValue}
75        data-slot="command-input"
76        aria-label={props["aria-label"] || "Search commands"}
77        className={cn(
78// … truncated