Files
peakskills/components/home/category-breakdown.tsx
2025-08-21 12:54:48 +02:00

67 lines
1.6 KiB
TypeScript

import { CategoryCard } from "./category-card";
interface CategoryBreakdownProps {
radarData: Array<{
category: string;
score: number;
maxScore: number;
}>;
userEvaluation: {
evaluations: Array<{
category: string;
selectedSkillIds: string[];
skills: Array<{
skillId: string;
level: string | null;
}>;
}>;
};
skillCategories: Array<{
category: string;
icon: string;
skills: Array<{
id: string;
name: string;
icon?: string;
}>;
}>;
}
export function CategoryBreakdown({
radarData,
userEvaluation,
skillCategories,
}: CategoryBreakdownProps) {
return (
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6">
<div className="mb-6">
<h3 className="text-xl font-bold text-white mb-2">
Détail par catégorie
</h3>
<p className="text-slate-400 text-sm">
Vue détaillée de votre progression dans chaque domaine
</p>
</div>
<div className="space-y-3">
{radarData.map((category) => {
const categoryEval = userEvaluation.evaluations.find(
(e) => e.category === category.category
);
const skillCategory = skillCategories.find(
(sc) => sc.category === category.category
);
return (
<CategoryCard
key={category.category}
category={category}
categoryEval={categoryEval}
skillCategory={skillCategory}
/>
);
})}
</div>
</div>
);
}