command

1"use client";
2 
3import * as React from "react";
4import { type DialogProps } from "@radix-ui/react-dialog";
5import { Command as CommandPrimitive } from "cmdk";
6import { Search } from "lucide-react";
7 
8import { cn } from "@aomi-labs/react";
9import { Dialog, DialogContent } from "./dialog";
10 
11const Command = React.forwardRef<
12  React.ElementRef<typeof CommandPrimitive>,
13  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
14>(({ className, ...props }, ref) => (
15  <CommandPrimitive
16    ref={ref}
17    className={cn(
18      "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
19      className,
20    )}
21    {...props}
22  />
23));
24Command.displayName = CommandPrimitive.displayName;
25 
26interface CommandDialogProps extends DialogProps {}
27 
28const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
29  return (
30    <Dialog {...props}>
31      <DialogContent className="overflow-hidden p-0 shadow-lg">
32        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[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">
33          {children}
34        </Command>
35      </DialogContent>
36    </Dialog>
37  );
38};
39 
40const CommandInput = React.forwardRef<
41  React.ElementRef<typeof CommandPrimitive.Input>,
42  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
43>(({ className, ...props }, ref) => (
44  // eslint-disable-next-line react/no-unknown-property
45  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
46    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
47    <CommandPrimitive.Input
48      ref={ref}
49      className={cn(
50        "placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
51        className,
52      )}
53      {...props}
54    />
55  </div>
56));
57 
58CommandInput.displayName = CommandPrimitive.Input.displayName;
59 
60const CommandList = React.forwardRef<
61  React.ElementRef<typeof CommandPrimitive.List>,
62  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
63>(({ className, ...props }, ref) => (
64  <CommandPrimitive.List
65    ref={ref}
66    className={cn("aui-command-list max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
67    {...props}
68// … truncated