Add skill removal functionality and enhance UI components

- Integrated onRemoveSkill functionality in SkillEvaluation, SkillSelector, and SkillEvaluationCard components for better skill management.
- Updated UI to improve user experience when removing skills, including tooltip descriptions and styling adjustments.
- Added new skills to backend, devops, frontend, and mobile JSON files for comprehensive skill coverage.
This commit is contained in:
Julien Froidefond
2025-08-20 16:06:09 +02:00
parent fe63f9592a
commit 5c510ebd07
22 changed files with 1758 additions and 42 deletions

View File

@@ -1,4 +1,4 @@
import { ExternalLink, BookOpen, Target, Info } from "lucide-react";
import { ExternalLink, Info, X } from "lucide-react";
import {
Tooltip,
TooltipContent,
@@ -11,6 +11,7 @@ interface SkillEvaluationCardProps {
skill: Skill;
currentLevel: SkillLevel;
onUpdateSkill: (skillId: string, level: SkillLevel) => void;
onRemoveSkill: (skillId: string) => void;
}
function getLevelColor(level: Exclude<SkillLevel, null>) {
@@ -43,6 +44,7 @@ export function SkillEvaluationCard({
skill,
currentLevel,
onUpdateSkill,
onRemoveSkill,
}: SkillEvaluationCardProps) {
const TechIcon = getTechIcon(skill.id);
@@ -131,27 +133,19 @@ export function SkillEvaluationCard({
);
})}
{/* Goal buttons */}
<div className="flex items-center gap-1 ml-2 border-l border-white/10 pl-2">
{/* Remove button */}
<div className="flex items-center 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
onClick={() => onRemoveSkill(skill.id)}
className="p-1 rounded-lg hover:bg-red-500/20 transition-colors"
>
<X className="h-3 w-3 text-slate-400 hover:text-red-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>
<p className="text-xs">Supprimer cette technologie</p>
</TooltipContent>
</Tooltip>
</div>