init

components/evaluation/category-tabs.tsx

@@ -0,0 +1,41 @@
+import { ChevronRight } from "lucide-react";
+import { SkillCategory } from "@/lib/types";
+
+interface CategoryTabsProps {
+  categories: SkillCategory[];
+  selectedCategory: string;
+  onCategoryChange: (category: string) => void;
+}
+
+export function CategoryTabs({
+  categories,
+  selectedCategory,
+  onCategoryChange,
+}: CategoryTabsProps) {
+  return (
+    <div className="flex flex-wrap gap-2 mb-8">
+      {categories.map((category) => {
+        const isActive = selectedCategory === category.category;
+        return (
+          <button
+            key={category.category}
+            onClick={() => onCategoryChange(category.category)}
+            className={`
+              relative px-6 py-3 rounded-xl font-medium transition-all duration-300 group
+              ${
+                isActive
+                  ? "bg-blue-500 text-white shadow-lg shadow-blue-500/25"
+                  : "bg-white/5 text-slate-300 hover:bg-white/10 border border-white/10 hover:border-white/20"
+              }
+            `}
+          >
+            <span className="relative z-10">{category.category}</span>
+            {isActive && (
+              <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-600/20 to-blue-400/20 animate-pulse" />
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

components/evaluation/evaluation-header.tsx

@@ -0,0 +1,22 @@
+import { Code2 } from "lucide-react";
+
+export function EvaluationHeader() {
+  return (
+    <div className="text-center space-y-4 mb-8">
+      <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm">
+        <Code2 className="h-4 w-4 text-blue-400" />
+        <span className="text-sm font-medium text-slate-200">
+          Évaluation de compétences
+        </span>
+      </div>
+
+      <h1 className="text-3xl font-bold text-white">
+        Mes compétences techniques
+      </h1>
+
+      <p className="text-slate-400 max-w-2xl mx-auto leading-relaxed">
+        Sélectionne tes technologies et définis ton niveau de maîtrise
+      </p>
+    </div>
+  );
+}

components/evaluation/index.ts

@@ -0,0 +1,5 @@
+export { EvaluationHeader } from "./evaluation-header";
+export { SkillLevelLegend } from "./skill-level-legend";
+export { CategoryTabs } from "./category-tabs";
+export { SkillEvaluationGrid } from "./skill-evaluation-grid";
+export { SkillEvaluationCard } from "./skill-evaluation-card";

components/evaluation/skill-evaluation-card.tsx

@@ -0,0 +1,157 @@
+import { ExternalLink, BookOpen, Target, Info } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Skill, SkillLevel, SKILL_LEVELS } from "@/lib/types";
+import { getTechIcon } from "@/components/icons/tech-icons";
+
+interface SkillEvaluationCardProps {
+  skill: Skill;
+  currentLevel: SkillLevel;
+  onUpdateSkill: (skillId: string, level: SkillLevel) => void;
+}
+
+function getLevelColor(level: Exclude<SkillLevel, null>) {
+  switch (level) {
+    case "never":
+      return "bg-red-500";
+    case "not-autonomous":
+      return "bg-amber-500";
+    case "autonomous":
+      return "bg-green-500";
+    case "expert":
+      return "bg-violet-500";
+  }
+}
+
+function getLevelColorBorder(level: Exclude<SkillLevel, null>) {
+  switch (level) {
+    case "never":
+      return "border-red-500";
+    case "not-autonomous":
+      return "border-amber-500";
+    case "autonomous":
+      return "border-green-500";
+    case "expert":
+      return "border-violet-500";
+  }
+}
+
+export function SkillEvaluationCard({
+  skill,
+  currentLevel,
+  onUpdateSkill,
+}: SkillEvaluationCardProps) {
+  const TechIcon = getTechIcon(skill.id);
+
+  return (
+    <div className="group relative bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-3 hover:bg-white/10 hover:border-white/20 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/10">
+      <div className="flex items-center justify-between">
+        {/* Skill Info */}
+        <div className="flex items-center gap-3 flex-1 min-w-0">
+          <div className="w-8 h-8 rounded-lg bg-white/10 border border-white/20 flex items-center justify-center group-hover:bg-white/20 transition-colors flex-shrink-0">
+            <TechIcon className="w-4 h-4 text-blue-400" />
+          </div>
+
+          <div className="flex items-center gap-2 flex-1 min-w-0">
+            <h4 className="font-semibold text-white text-sm truncate">
+              {skill.name}
+            </h4>
+
+            {/* Info tooltip */}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button className="text-slate-400 hover:text-blue-400 transition-colors flex-shrink-0">
+                  <Info className="h-3 w-3" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent className="max-w-sm">
+                <div className="space-y-2">
+                  <p className="text-sm">{skill.description}</p>
+                  {skill.links.length > 0 && (
+                    <div className="space-y-1">
+                      <p className="text-xs font-medium">Liens utiles :</p>
+                      {skill.links.map((link, index) => (
+                        <a
+                          key={index}
+                          href={link}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="flex items-center gap-1 text-xs text-blue-400 hover:text-blue-300"
+                        >
+                          <ExternalLink className="h-3 w-3" />
+                          {new URL(link).hostname}
+                        </a>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+
+        {/* Level Selection */}
+        <div className="flex items-center gap-2 flex-shrink-0 ml-4">
+          {Object.entries(SKILL_LEVELS).map(([value, label]) => {
+            const isSelected = currentLevel === value;
+            const levelValue = value as Exclude<SkillLevel, null>;
+            return (
+              <Tooltip key={value}>
+                <TooltipTrigger asChild>
+                  <button
+                    onClick={() => onUpdateSkill(skill.id, levelValue)}
+                    className={`
+                      relative w-5 h-5 rounded-md border-2 transition-all hover:scale-110
+                      ${
+                        isSelected
+                          ? `${getLevelColor(levelValue)} ${getLevelColorBorder(
+                              levelValue
+                            )} shadow-lg`
+                          : "bg-white/5 border-white/20 hover:border-white/30 hover:bg-white/10"
+                      }
+                    `}
+                  >
+                    {isSelected && (
+                      <div className="absolute inset-0.5 bg-white rounded-sm"></div>
+                    )}
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className="text-sm font-medium">{label}</p>
+                </TooltipContent>
+              </Tooltip>
+            );
+          })}
+
+          {/* Goal buttons */}
+          <div className="flex items-center gap-1 ml-2 border-l border-white/10 pl-2">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button className="p-1 rounded-lg hover:bg-white/10 transition-colors">
+                  <BookOpen className="h-3 w-3 text-slate-400 hover:text-blue-400" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p className="text-xs">Envie d'apprendre</p>
+              </TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button className="p-1 rounded-lg hover:bg-white/10 transition-colors">
+                  <Target className="h-3 w-3 text-slate-400 hover:text-green-400" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p className="text-xs">Peut encadrer</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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>
+  );
+}

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>
+  );
+}