Command based on Lina's Radix UI variant

1"use client";
2
3import * as React from "react";
4import { ScrollArea } from "@/registry/radix-ui/scroll-area";
5
6import { Command as CommandPrimitive } from "cmdk";
7import { SearchIcon } from "lucide-react";
8
9import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
10
11import { cn } from "@/lib/utils";
12
13function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
14  return (
15    <CommandPrimitive
16      data-slot="command"
17      className={cn("bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-md", className)}
18      {...props}
19    />
20  );
21}
22
23function CommandDialog({
24  title = "Command Palette",
25  description = "Search for a command to run...",
26  children,
27  ...props
28}: React.ComponentProps<typeof Dialog> & {
29  title?: string;
30  description?: string;
31}) {
32  return (
33    <Dialog {...props}>
34      <DialogHeader className="sr-only">
35        <DialogTitle>{title}</DialogTitle>
36        <DialogDescription>{description}</DialogDescription>
37      </DialogHeader>
38      <DialogContent className="overflow-hidden p-0 sm:max-w-lg [&>button:last-child]:hidden">
39        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground max-h-[100svh] **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-3 [&_[cmdk-item]]:py-2">
40          {children}
41        </Command>
42      </DialogContent>
43    </Dialog>
44  );
45}
46
47function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
48  return (
49    <div className="border-input flex items-center border-b px-5" cmdk-input-wrapper="">
50      <SearchIcon size={20} className="text-muted-foreground/80 me-3" />
51      <CommandPrimitive.Input
52        data-slot="command-input-wrapper"
53        className={cn(
54          "placeholder:text-muted-foreground/70 flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
55          className
56        )}
57        {...props}
58      />
59    </div>
60  );
61}
62
63function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
64  return (
65    <ScrollArea
66      maskClassName="before:from-popover after:from-popover"
67      className="flex max-h-full flex-col overflow-hidden"
68    >
69// … truncated