refactor: extract components from SkillsTab.tsx to reduce below 400 lines

2026-05-01 16:41:29 +02:00
parent 86683fe288
commit f0ab3ca3ce
8 changed files with 422 additions and 232 deletions
@@ -0,0 +1,42 @@
+// ─── 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';