command

1"use client"
2 
3import * as React from "react"
4import { Command as CommandPrimitive } from "cmdk"
5 
6import { cn } from "@/registry/radix-sera/lib/utils"
7import {
8  Dialog,
9  DialogContent,
10  DialogDescription,
11  DialogHeader,
12  DialogTitle,
13} from "@/registry/radix-sera/ui/dialog"
14import {
15  InputGroup,
16  InputGroupAddon,
17} from "@/registry/radix-sera/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        "flex size-full flex-col overflow-hidden bg-popover text-popover-foreground",
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("top-1/3 translate-y-0 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">
71      <InputGroup className="border-transparent border-b-input bg-transparent px-3">
72        <CommandPrimitive.Input
73          data-slot="command-input"
74          className={cn(
75            "w-full px-2 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            remixicon="RiSearchLine"
87            className="size-3.5 shrink-0 opacity-50"
88          />
89        </InputGroupAddon>
90      </InputGroup>
91    </div>
92  )
93}
94 
95function CommandList({
96  className,
97  ...props
98}: React.ComponentProps<typeof CommandPrimitive.List>) {
99  return (
100// … truncated