Command

1"use client";
2 
3import { Command as CommandPrimitive } from "cmdk";
4import { Search } from "lucide-react";
5import { forwardRef } from "react";
6import { cn } from "@/lib/utils";
7 
8export const Command = forwardRef<
9  HTMLDivElement,
10  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
11>(({ className, ...props }, ref) => (
12  <CommandPrimitive
13    ref={ref}
14    className={cn(
15      "flex h-full w-full flex-col overflow-hidden rounded-[32px] bg-transparent text-current",
16      className,
17    )}
18    {...props}
19  />
20));
21Command.displayName = "Command";
22 
23export const CommandInput = forwardRef<
24  HTMLInputElement,
25  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
26>(({ className, ...props }, ref) => (
27  <div
28    className="flex items-center border-b border-black/[0.08] dark:border-white/10 px-3"
29    cmdk-input-wrapper=""
30  >
31    <Search className="mr-2 size-4 shrink-0 text-current/50" aria-hidden />
32    <CommandPrimitive.Input
33      ref={ref}
34      className={cn(
35        "flex h-11 w-full rounded-none bg-transparent py-3 text-sm outline-none placeholder:text-current/45 disabled:cursor-not-allowed disabled:opacity-50",
36        className,
37      )}
38      {...props}
39    />
40  </div>
41));
42CommandInput.displayName = CommandPrimitive.Input.displayName;
43 
44export const CommandList = forwardRef<
45  HTMLDivElement,
46  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
47>(({ className, ...props }, ref) => (
48  <CommandPrimitive.List
49    ref={ref}
50    className={cn(
51      "max-h-[min(320px,50vh)] overflow-y-auto overflow-x-hidden p-1",
52      className,
53    )}
54    {...props}
55  />
56));
57CommandList.displayName = CommandPrimitive.List.displayName;
58 
59export const CommandEmpty = forwardRef<
60  HTMLDivElement,
61  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
62>((props, ref) => (
63  <CommandPrimitive.Empty
64    ref={ref}
65    className="py-6 text-center text-sm text-current/55"
66    {...props}
67  />
68));
69CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
70 
71export const CommandGroup = forwardRef<
72  HTMLDivElement,
73  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
74>(({ className, ...props }, ref) => (
75  <CommandPrimitive.Group
76    ref={ref}
77    className={cn(
78      "overflow-hidden p-1 text-current [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-current/55",
79      className,
80    )}
81    {...props}
82  />
83));
84// … truncated