jaydip.me
1import * as React from "react"
2import { type DialogProps } from "@radix-ui/react-dialog"
3import { Command as CommandPrimitive } from "cmdk"
4import { Search } from "lucide-react"
5
6import { cn } from "@/lib/utils"
7import { Dialog, DialogContent } from "@/components/ui/dialog"
8
9const Command = React.forwardRef<
10 React.ElementRef<typeof CommandPrimitive>,
11 React.ComponentPropsWithoutRef<typeof CommandPrimitive>
12>(({ className, ...props }, ref) => (
13 <CommandPrimitive
14 ref={ref}
15 className={cn(
16 "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
17 className
18 )}
19 {...props}
20 />
21))
22Command.displayName = CommandPrimitive.displayName
23
24interface CommandDialogProps extends DialogProps {}
25
26const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
27 return (
28 <Dialog {...props}>
29 <DialogContent className="overflow-hidden p-0 shadow-lg">
30 <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[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">
31 {children}
32 </Command>
33 </DialogContent>
34 </Dialog>
35 )
36}
37
38const CommandInput = React.forwardRef<
39 React.ElementRef<typeof CommandPrimitive.Input>,
40 React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
41>(({ className, ...props }, ref) => (
42 <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
43 <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
44 <CommandPrimitive.Input
45 ref={ref}
46 className={cn(
47 "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
48 className
49 )}
50 {...props}
51 />
52 </div>
53))
54
55CommandInput.displayName = CommandPrimitive.Input.displayName
56
57const CommandList = React.forwardRef<
58 React.ElementRef<typeof CommandPrimitive.List>,
59 React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
60>(({ className, ...props }, ref) => (
61 <CommandPrimitive.List
62 ref={ref}
63 className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
64 {...props}
65 />
66))
67
68CommandList.displayName = CommandPrimitive.List.displayName
69
70const CommandEmpty = React.forwardRef<
71 React.ElementRef<typeof CommandPrimitive.Empty>,
72 React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
73>((props, ref) => (
74 <CommandPrimitive.Empty
75 ref={ref}
76 className="py-6 text-center text-sm"
77 {...props}
78 />
79))
80
81CommandEmpty.displayName = CommandPrimitive.Empty.displayName
82
83const CommandGroup = React.forwardRef<
84 React.ElementRef<typeof CommandPrimitive.Group>,
85 React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
86>(({ className, ...props }, ref) => (
87 <CommandPrimitive.Group
88 ref={ref}
89 className={cn(
90 "overflow-hidden p-1 text-foreground [&_[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-muted-foreground",
91 className
92 )}
93 {...props}
94 />
95))
96
97CommandGroup.displayName = CommandPrimitive.Group.displayName
98
99const CommandSeparator = React.forwardRef<
100 React.ElementRef<typeof CommandPrimitive.Separator>,
101 React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
102>(({ className, ...props }, ref) => (
103 <CommandPrimitive.Separator
104 ref={ref}
105 className={cn("-mx-1 h-px bg-border", className)}
106 {...props}
107 />
108))
109CommandSeparator.displayName = CommandPrimitive.Separator.displayName
110
111const CommandItem = React.forwardRef<
112 React.ElementRef<typeof CommandPrimitive.Item>,
113 React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
114>(({ className, ...props }, ref) => (
115 <CommandPrimitive.Item
116 ref={ref}
117 className={cn(
118 "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
119 className
120 )}
121 {...props}
122 />
123))
124
125CommandItem.displayName = CommandPrimitive.Item.displayName
126
127const CommandShortcut = ({
128 className,
129 ...props
130}: React.HTMLAttributes<HTMLSpanElement>) => {
131 return (
132 <span
133 className={cn(
134 "ml-auto text-xs tracking-widest text-muted-foreground",
135 className
136 )}
137 {...props}
138 />
139 )
140}
141CommandShortcut.displayName = "CommandShortcut"
142
143export {
144 Command,
145 CommandDialog,
146 CommandInput,
147 CommandList,
148 CommandEmpty,
149 CommandGroup,
150 CommandItem,
151 CommandShortcut,
152 CommandSeparator,
153}