tianwen / frontend /src /components /ui /command.tsx
liuyd-dev's picture
v0: zero is infinite
07c10da verified
Raw
History Blame Contribute Delete
2.36 kB
/* shadcn Command (cmdk) — 精简版: 仅命令面板列表, 不含 CommandDialog。
用于城市搜索: shouldFilter={false} + 手动过滤 (城市库 2MB, 不交给 cmdk 全量过滤)。 */
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 }