init

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