init

components/evaluation/skill-evaluation-grid.tsx

@@ -0,0 +1,61 @@
+import { SkillCategory, CategoryEvaluation, SkillLevel } from "@/lib/types";
+import { SkillEvaluationCard } from "./skill-evaluation-card";
+
+interface SkillEvaluationGridProps {
+  currentCategory: SkillCategory;
+  currentEvaluation: CategoryEvaluation;
+  onUpdateSkill: (category: string, skillId: string, level: SkillLevel) => void;
+}
+
+export function SkillEvaluationGrid({
+  currentCategory,
+  currentEvaluation,
+  onUpdateSkill,
+}: SkillEvaluationGridProps) {
+  const getSkillLevel = (skillId: string): SkillLevel => {
+    const skillEval = currentEvaluation?.skills.find(
+      (s) => s.skillId === skillId
+    );
+    return skillEval?.level || null;
+  };
+
+  if (!currentEvaluation.selectedSkillIds.length) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-3">
+        <h3 className="text-xl font-bold text-white">
+          {currentCategory.category}
+        </h3>
+        <div className="px-3 py-1 rounded-full bg-blue-500/20 border border-blue-500/30">
+          <span className="text-xs font-medium text-blue-400">
+            {currentEvaluation.selectedSkillIds.length} compétence
+            {currentEvaluation.selectedSkillIds.length > 1 ? "s" : ""}
+          </span>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        {currentEvaluation.selectedSkillIds.map((skillId) => {
+          const skill = currentCategory.skills.find((s) => s.id === skillId);
+          if (!skill) return null;
+
+          const currentLevel = getSkillLevel(skill.id);
+
+          return (
+            <SkillEvaluationCard
+              key={skill.id}
+              skill={skill}
+              currentLevel={currentLevel}
+              onUpdateSkill={(skillId, level) =>
+                onUpdateSkill(currentCategory.category, skillId, level)
+              }
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}