| 1 | import { Command as Cmdk } from "cmdk"; |
| 2 | import { Search } from "lucide-react"; |
| 3 | import type { ComponentProps } from "react"; |
| 4 | |
| 5 | import { cn } from "../../lib/cn"; |
| 6 | |
| 7 | // shadcn/ui's command menu (cmdk), styled with g1t's tokens: a searchable list |
| 8 | // for the palette and the combobox. The combobox in ./combobox wraps it in |
| 9 | // a popover. |
| 10 | |
| 11 | export function Command({ className, ...props }: ComponentProps<typeof Cmdk>) { |
| 12 | return <Cmdk className={cn("flex w-full flex-col overflow-hidden text-sm text-fg", className)} {...props} />; |
| 13 | } |
| 14 | |
| 15 | export function CommandInput({ className, ...props }: ComponentProps<typeof Cmdk.Input>) { |
| 16 | return ( |
| 17 | <div className="flex items-center gap-2 border-b border-line px-3" cmdk-input-wrapper=""> |
| 18 | <Search size={14} className="shrink-0 text-faint" /> |
| 19 | <Cmdk.Input |
| 20 | className={cn("h-10 w-full bg-transparent text-sm outline-none placeholder:text-faint focus-visible:outline-none", className)} |
| 21 | {...props} |
| 22 | /> |
| 23 | </div> |
| 24 | ); |
| 25 | } |
| 26 | |
| 27 | export function CommandList({ className, ...props }: ComponentProps<typeof Cmdk.List>) { |
| 28 | return <Cmdk.List className={cn("max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto p-1", className)} {...props} />; |
| 29 | } |
| 30 | |
| 31 | export function CommandEmpty({ className, ...props }: ComponentProps<typeof Cmdk.Empty>) { |
| 32 | return <Cmdk.Empty className={cn("py-6 text-center text-sm text-faint", className)} {...props} />; |
| 33 | } |
| 34 | |
| 35 | export function CommandGroup({ className, ...props }: ComponentProps<typeof Cmdk.Group>) { |
| 36 | return ( |
| 37 | <Cmdk.Group |
| 38 | className={cn( |
| 39 | "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1 [&_[cmdk-group-heading]]:text-[0.6875rem] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:tracking-wide [&_[cmdk-group-heading]]:text-faint [&_[cmdk-group-heading]]:uppercase", |
| 40 | className, |
| 41 | )} |
| 42 | {...props} |
| 43 | /> |
| 44 | ); |
| 45 | } |
| 46 | |
| 47 | export function CommandSeparator({ className, ...props }: ComponentProps<typeof Cmdk.Separator>) { |
| 48 | return <Cmdk.Separator className={cn("-mx-1 my-1 h-px bg-line", className)} {...props} />; |
| 49 | } |
| 50 | |
| 51 | export function CommandItem({ className, ...props }: ComponentProps<typeof Cmdk.Item>) { |
| 52 | return ( |
| 53 | <Cmdk.Item |
| 54 | className={cn( |
| 55 | "relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-fg/90 outline-none select-none", |
| 56 | "data-[selected=true]:bg-line data-[selected=true]:text-fg data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45", |
| 57 | "[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted", |
| 58 | className, |
| 59 | )} |
| 60 | {...props} |
| 61 | /> |
| 62 | ); |
| 63 | } |