| |
| |
| import * as React from "react" |
| import { Command as CommandPrimitive } from "cmdk" |
| import { RiSearchLine } from "@remixicon/react" |
|
|
| import { cn } from "@/lib/utils" |
|
|
| function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) { |
| return ( |
| <CommandPrimitive |
| data-slot="command" |
| className={cn("text-foreground flex h-full w-full flex-col overflow-hidden", className)} |
| {...props} |
| /> |
| ) |
| } |
|
|
| function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) { |
| return ( |
| <div data-slot="command-input-wrapper" className="border-border flex items-center gap-2 border-b px-3"> |
| <RiSearchLine className="text-muted-foreground size-4 shrink-0 opacity-70" /> |
| <CommandPrimitive.Input |
| data-slot="command-input" |
| className={cn( |
| "placeholder:text-muted-foreground flex h-10 w-full bg-transparent py-3 text-sm outline-none disabled:opacity-50", |
| className, |
| )} |
| {...props} |
| /> |
| </div> |
| ) |
| } |
|
|
| function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) { |
| return ( |
| <CommandPrimitive.List |
| data-slot="command-list" |
| className={cn("max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto", className)} |
| {...props} |
| /> |
| ) |
| } |
|
|
| function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) { |
| return ( |
| <CommandPrimitive.Empty |
| data-slot="command-empty" |
| className="text-muted-foreground py-4 text-center text-sm" |
| {...props} |
| /> |
| ) |
| } |
|
|
| function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) { |
| return ( |
| <CommandPrimitive.Item |
| data-slot="command-item" |
| className={cn( |
| "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50", |
| className, |
| )} |
| {...props} |
| /> |
| ) |
| } |
|
|
| export { Command, CommandInput, CommandList, CommandEmpty, CommandItem } |
|
|