init

2025-08-20 15:43:24 +02:00
commit 09d2c5cbe1
100 changed files with 12494 additions and 0 deletions
--- a/components/evaluation/skill-level-legend.tsx
+++ b/components/evaluation/skill-level-legend.tsx
@@ -0,0 +1,99 @@
+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>
+  );
+}