command

1"use client"
2 
3import * as React from "react"
4import { Command as CommandPrimitive } from "cmdk"
5 
6import { cn } from "@/registry/bases/radix/lib/utils"
7import {
8  Dialog,
9  DialogContent,
10  DialogDescription,
11  DialogHeader,
12  DialogTitle,
13} from "@/registry/bases/radix/ui/dialog"
14import {
15  InputGroup,
16  InputGroupAddon,
17} from "@/registry/bases/radix/ui/input-group"
18import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
19 
20function Command({
21  className,
22  ...props
23}: React.ComponentProps<typeof CommandPrimitive>) {
24  return (
25    <CommandPrimitive
26      data-slot="command"
27      className={cn(
28        "bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden",
29        className
30      )}
31      {...props}
32    />
33  )
34}
35 
36function CommandDialog({
37  title = "Command Palette",
38  description = "Search for a command to run...",
39  children,
40  className,
41  showCloseButton = false,
42  ...props
43}: React.ComponentProps<typeof Dialog> & {
44  title?: string
45  description?: string
46  className?: string
47  showCloseButton?: boolean
48}) {
49  return (
50    <Dialog {...props}>
51      <DialogHeader className="sr-only">
52        <DialogTitle>{title}</DialogTitle>
53        <DialogDescription>{description}</DialogDescription>
54      </DialogHeader>
55      <DialogContent
56        className={cn("rounded-xl! overflow-hidden p-0", className)}
57        showCloseButton={showCloseButton}
58      >
59        {children}
60      </DialogContent>
61    </Dialog>
62  )
63}
64 
65function CommandInput({
66  className,
67  ...props
68}: React.ComponentProps<typeof CommandPrimitive.Input>) {
69  return (
70    <div data-slot="command-input-wrapper" className="p-1 pb-0">
71      <InputGroup className="bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!">
72        <CommandPrimitive.Input
73          data-slot="command-input"
74          className={cn(
75            "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
76            className
77          )}
78          {...props}
79        />
80        <InputGroupAddon>
81          <IconPlaceholder
82            lucide="SearchIcon"
83            tabler="IconSearch"
84            hugeicons="SearchIcon"
85            phosphor="MagnifyingGlassIcon"
86            className="size-4 shrink-0 opacity-50"
87          />
88        </InputGroupAddon>
89      </InputGroup>
90    </div>
91  )
92}
93 
94function CommandList({
95  className,
96  ...props
97}: React.ComponentProps<typeof CommandPrimitive.List>) {
98  return (
99// … truncated