Refactoring Agent
f0ab3ca3ce
Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 1m10s
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
// ─── Skill Category Header ───────────────────────────────────────────
|
|
// Header for a skill category with collapse/expand toggle
|
|
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { ChevronDown, ChevronRight } from 'lucide-react';
|
|
|
|
interface SkillCategoryHeaderProps {
|
|
category: {
|
|
id: string;
|
|
name: string;
|
|
icon: string;
|
|
};
|
|
skillCount: number;
|
|
isCollapsed: boolean;
|
|
onToggle: () => void;
|
|
}
|
|
|
|
export function SkillCategoryHeader({
|
|
category,
|
|
skillCount,
|
|
isCollapsed,
|
|
onToggle,
|
|
}: SkillCategoryHeaderProps) {
|
|
return (
|
|
<CardHeader className="pb-2 cursor-pointer" onClick={onToggle}>
|
|
<CardTitle className="text-amber-400 game-panel-title text-xs flex items-center justify-between">
|
|
<span>
|
|
{category.icon} {category.name}
|
|
</span>
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant="outline" className="text-xs">
|
|
{skillCount} skills
|
|
</Badge>
|
|
{isCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
|
|
</div>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
);
|
|
}
|
|
|
|
// Local import of CardHeader and CardTitle to avoid circular deps
|
|
import { CardHeader, CardTitle } from '@/components/ui/card';
|