55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { cn } from "@/lib/utils";
|
|
import type { AgentCategory } from "@/types/agent";
|
|
|
|
interface AgentCategoryTabsProps {
|
|
categories: AgentCategory[];
|
|
selectedCategoryId?: string | null;
|
|
onSelectCategory: (categoryId: string | null) => void;
|
|
}
|
|
|
|
export function AgentCategoryTabs({
|
|
categories,
|
|
selectedCategoryId,
|
|
onSelectCategory,
|
|
}: AgentCategoryTabsProps) {
|
|
return (
|
|
<div className="flex flex-wrap gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => onSelectCategory(null)}
|
|
className={cn(
|
|
"rounded-full border px-3 py-1 text-xs transition-colors",
|
|
!selectedCategoryId
|
|
? "border-primary bg-primary/10 text-primary"
|
|
: "border-border bg-background text-muted-foreground hover:bg-muted/50"
|
|
)}
|
|
>
|
|
全部
|
|
</button>
|
|
{categories.map((category) => (
|
|
<button
|
|
key={category.id}
|
|
type="button"
|
|
onClick={() => onSelectCategory(category.id)}
|
|
className={cn(
|
|
"rounded-full border px-3 py-1 text-xs transition-colors",
|
|
selectedCategoryId === category.id
|
|
? "border-primary bg-primary/10 text-primary"
|
|
: "border-border bg-background text-muted-foreground hover:bg-muted/50"
|
|
)}
|
|
>
|
|
<span>{category.name}</span>
|
|
{category.scope === "global" ? (
|
|
<Badge variant="outline" className="ml-2 px-1.5 py-0 text-[10px]">
|
|
全局
|
|
</Badge>
|
|
) : null}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|