35 lines
1.8 KiB
TypeScript
35 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { Command as CommandPrimitive } from 'cmdk';
|
|
import { Search } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
|
|
return <CommandPrimitive className={cn('flex h-full w-full flex-col overflow-hidden rounded-xl bg-white text-[#111827]', className)} {...props} />;
|
|
}
|
|
|
|
export function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
|
|
return (
|
|
<div className="flex h-11 items-center gap-2 border-b border-[#eceef4] px-3">
|
|
<Search className="h-4 w-4 shrink-0 text-[#8a8f9e]" />
|
|
<CommandPrimitive.Input className={cn('h-10 w-full bg-transparent text-sm outline-none placeholder:text-[#8a8f9e]', className)} {...props} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
|
|
return <CommandPrimitive.List className={cn('max-h-64 overflow-y-auto overflow-x-hidden p-1', className)} {...props} />;
|
|
}
|
|
|
|
export function CommandEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
|
|
return <CommandPrimitive.Empty className={cn('py-6 text-center text-sm text-[#667085]', className)} {...props} />;
|
|
}
|
|
|
|
export function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
|
|
return <CommandPrimitive.Group className={cn('overflow-hidden p-1 text-sm', className)} {...props} />;
|
|
}
|
|
|
|
export function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
|
|
return <CommandPrimitive.Item className={cn('flex cursor-pointer select-none items-center gap-3 rounded-xl px-3 py-2 text-sm outline-none data-[selected=true]:bg-[#f4f5f8]', className)} {...props} />;
|
|
}
|