Command

1"use client"
2
3import { Command as CommandPrimitive } from "cmdk"
4import { Search } from "lucide-react"
5
6import * as React from "react"
7
8import {
9  Dialog,
10  DialogContent,
11  DialogDescription,
12  DialogHeader,
13  DialogTitle,
14} from "@/components/ui/dialog"
15
16import { cn } from "@/lib/utils"
17
18function Command({
19  className,
20  ...props
21}: React.ComponentProps<typeof CommandPrimitive>) {
22  return (
23    <CommandPrimitive
24      data-slot="command"
25      className={cn(
26        "flex h-full w-full flex-col overflow-hidden rounded-[0px] border-2 border-border bg-main font-base text-main-foreground",
27        className,
28      )}
29      {...props}
30    />
31  )
32}
33
34function CommandDialog({
35  title = "Command Palette",
36  description = "Search for a command to run...",
37  children,
38  ...props
39}: React.ComponentProps<typeof Dialog> & {
40  title?: string
41  description?: string
42}) {
43  return (
44    <Dialog {...props}>
45      <DialogHeader className="sr-only">
46        <DialogTitle>{title}</DialogTitle>
47        <DialogDescription>{description}</DialogDescription>
48      </DialogHeader>
49      <DialogContent className="overflow-hidden p-0 rounded-[0px]! shadow-shadow border-0">
50        <Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-heading [&_[cmdk-group-heading]]:mb-1 [&_[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">
51          {children}
52        </Command>
53      </DialogContent>
54    </Dialog>
55  )
56}
57
58function CommandInput({
59  className,
60  ...props
61}: React.ComponentProps<typeof CommandPrimitive.Input>) {
62  return (
63    <div
64      data-slot="command-input-wrapper"
65      className="flex h-9 gap-2 items-center border-b-2 border-border px-3"
66    >
67      <Search className="size-4 shrink-0" />
68      <CommandPrimitive.Input
69        data-slot="command-input"
70        className={cn(
71          "flex h-10 w-full rounded-base bg-transparent py-3 text-sm outline-hidden placeholder:text-main-foreground placeholder:opacity-50 disabled:cursor-not-allowed disabled:opacity-50",
72          className,
73        )}
74        {...props}
75      />
76    </div>
77  )
78}
79
80function CommandList({
81  className,
82  ...props
83}: React.ComponentProps<typeof CommandPrimitive.List>) {
84  return (
85    <CommandPrimitive.List
86// … truncated