100 lines
3.7 KiB
TypeScript
100 lines
3.7 KiB
TypeScript
import { Zap, Circle, Minus, CheckCircle2 } from "lucide-react";
|
|
import { SKILL_LEVELS, SkillLevel } from "@/lib/types";
|
|
|
|
function getLevelConfig(level: Exclude<SkillLevel, null>) {
|
|
switch (level) {
|
|
case "never":
|
|
return {
|
|
bg: "bg-gradient-to-r from-red-500/20 to-red-600/20",
|
|
border: "border-red-500/30",
|
|
text: "text-red-600 dark:text-red-400",
|
|
glow: "shadow-red-500/20",
|
|
icon: Circle,
|
|
};
|
|
case "not-autonomous":
|
|
return {
|
|
bg: "bg-gradient-to-r from-amber-500/20 to-yellow-600/20",
|
|
border: "border-amber-500/30",
|
|
text: "text-amber-600 dark:text-amber-400",
|
|
glow: "shadow-amber-500/20",
|
|
icon: Minus,
|
|
};
|
|
case "autonomous":
|
|
return {
|
|
bg: "bg-gradient-to-r from-green-500/20 to-emerald-600/20",
|
|
border: "border-green-500/30",
|
|
text: "text-green-600 dark:text-green-400",
|
|
glow: "shadow-green-500/20",
|
|
icon: CheckCircle2,
|
|
};
|
|
case "expert":
|
|
return {
|
|
bg: "bg-gradient-to-r from-violet-500/20 to-purple-600/20",
|
|
border: "border-violet-500/30",
|
|
text: "text-violet-600 dark:text-violet-400",
|
|
glow: "shadow-violet-500/20",
|
|
icon: Zap,
|
|
};
|
|
}
|
|
}
|
|
|
|
const levelDescriptions = {
|
|
never:
|
|
"Je n'ai jamais utilisé cette technologie ou je n'en ai qu'une connaissance théorique très limitée.",
|
|
"not-autonomous":
|
|
"J'ai déjà utilisé cette technologie mais j'ai besoin d'aide ou de supervision pour l'utiliser efficacement.",
|
|
autonomous:
|
|
"Je maîtrise cette technologie et peux travailler de manière autonome dessus dans la plupart des situations.",
|
|
expert:
|
|
"J'ai une expertise avancée, je peux former d'autres personnes et résoudre des problèmes complexes.",
|
|
};
|
|
|
|
export function SkillLevelLegend() {
|
|
return (
|
|
<div className="mt-16 pt-8 border-t border-white/20">
|
|
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-8">
|
|
<h3 className="text-xl font-bold mb-6 text-white flex items-center gap-3">
|
|
<Zap className="h-6 w-6 text-blue-400" />
|
|
Légende des niveaux de compétence
|
|
</h3>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{Object.entries(SKILL_LEVELS).map(([value, label]) => {
|
|
const config = getLevelConfig(value as Exclude<SkillLevel, null>);
|
|
const Icon = config.icon;
|
|
const description =
|
|
levelDescriptions[value as keyof typeof levelDescriptions];
|
|
|
|
return (
|
|
<div
|
|
key={value}
|
|
className="flex gap-4 p-4 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 transition-colors"
|
|
>
|
|
<div className="flex-shrink-0">
|
|
<div className="w-8 h-8 rounded-lg border-2 flex items-center justify-center bg-white/10">
|
|
<Icon className={`h-4 w-4 ${config.text}`} />
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 space-y-1">
|
|
<h4 className="font-semibold text-white">{label}</h4>
|
|
<p className="text-sm text-slate-400 leading-relaxed">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="mt-6 p-4 rounded-xl bg-blue-500/10 border border-blue-500/20">
|
|
<p className="text-sm text-blue-200 text-center">
|
|
💡 <strong>Astuce :</strong> Soyez honnête dans votre
|
|
auto-évaluation. Cela vous aidera à identifier vos points forts et
|
|
les domaines à améliorer.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|