julienfroidefond/peakskills
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance skill evaluation UI with category icons and URL state management

Browse Source 
- Added category icons to the skill evaluation components for better visual representation.
- Implemented URL parameter handling in SkillEvaluation to maintain selected category state across navigation.
- Improved the HomePage layout with expandable skill categories and enhanced user interaction.
- Updated skill data files to include icon properties for each category.
This commit is contained in:
Julien Froidefond
2025-08-20 15:52:59 +02:00
parent 09d2c5cbe1
commit fe63f9592a
15 changed files with 202 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
app/page.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useEffect } from "react";
import { useEffect, useState } from "react";
import { useEvaluation } from "@/hooks/use-evaluation";
import { ProfileForm } from "@/components/profile-form";
import { SkillsRadarChart } from "@/components/radar-chart";
@@ -15,14 +15,17 @@ import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { generateRadarData } from "@/lib/evaluation-utils";
import { useUser } from "@/hooks/use-user-context";
import { getTechIcon } from "@/components/icons/tech-icons";
import Link from "next/link";
import { Code2 } from "lucide-react";
import { Code2, ChevronDown, ChevronRight, ExternalLink } from "lucide-react";
import { getCategoryIcon } from "@/lib/category-icons";
export default function HomePage() {
const { userEvaluation, skillCategories, teams, loading, updateProfile } =
useEvaluation();
const { setUserInfo } = useUser();
const [expandedCategory, setExpandedCategory] = useState<string | null>(null);
// Update user info in navigation when user evaluation is loaded
useEffect(() => {
@@ -148,36 +151,124 @@ export default function HomePage() {
const evaluatedCount =
categoryEval?.skills.filter((s) => s.level !== null).length ||
0;
const isExpanded = expandedCategory === category.category;
const currentSkillCategory = skillCategories.find(
(sc) => sc.category === category.category
);
const CategoryIcon = currentSkillCategory
? getCategoryIcon(currentSkillCategory.icon)
: null;
return (
<div
key={category.category}
className="bg-white/5 border border-white/10 rounded-lg p-3 hover:bg-white/10 transition-colors"
className="bg-white/5 border border-white/10 rounded-lg overflow-hidden transition-colors"
>
<div className="flex justify-between items-center mb-2">
<h4 className="font-medium text-white text-sm">
{category.category}
</h4>
<div className="px-2 py-0.5 rounded-full bg-blue-500/20 border border-blue-500/30">
<span className="text-xs font-medium text-blue-400">
{category.score.toFixed(1)}/3
</span>
<div
className="p-3 hover:bg-white/10 transition-colors cursor-pointer"
onClick={() =>
setExpandedCategory(
isExpanded ? null : category.category
)
}
>
<div className="flex justify-between items-center mb-2">
<div className="flex items-center gap-2">
{isExpanded ? (
<ChevronDown className="h-4 w-4 text-slate-400" />
) : (
<ChevronRight className="h-4 w-4 text-slate-400" />
)}
{CategoryIcon && (
<CategoryIcon className="h-4 w-4 text-blue-400" />
)}
<h4 className="font-medium text-white text-sm">
{category.category}
</h4>
</div>
<div className="px-2 py-0.5 rounded-full bg-blue-500/20 border border-blue-500/30">
<span className="text-xs font-medium text-blue-400">
{category.score.toFixed(1)}/3
</span>
</div>
</div>
<div className="text-xs text-slate-400 mb-2">
{evaluatedCount}/{skillsCount} compétences sélectionnées
évaluées
</div>
<div className="w-full bg-white/10 rounded-full h-1.5">
<div
className="bg-gradient-to-r from-blue-500 to-blue-400 h-1.5 rounded-full transition-all"
style={{
width: `${
(category.score / category.maxScore) * 100
}%`,
}}
></div>
</div>
</div>
<div className="text-xs text-slate-400 mb-2">
{evaluatedCount}/{skillsCount} compétences sélectionnées
évaluées
</div>
<div className="w-full bg-white/10 rounded-full h-1.5">
<div
className="bg-gradient-to-r from-blue-500 to-blue-400 h-1.5 rounded-full transition-all"
style={{
width: `${
(category.score / category.maxScore) * 100
}%`,
}}
></div>
</div>
{/* Expanded Skills */}
{isExpanded && categoryEval && currentSkillCategory && (
<div className="px-3 pb-3 border-t border-white/10 bg-white/5">
<div className="pt-3 space-y-2 max-h-60 overflow-y-auto">
{categoryEval.selectedSkillIds.map((skillId) => {
const skill = currentSkillCategory.skills.find(
(s) => s.id === skillId
);
if (!skill) return null;
const skillEval = categoryEval.skills.find(
(s) => s.skillId === skillId
);
const TechIcon = getTechIcon(skill.id);
return (
<div
key={skillId}
className="flex items-center justify-between p-2 bg-white/5 border border-white/10 rounded-lg"
>
<div className="flex items-center gap-2">
<TechIcon className="w-4 h-4 text-blue-400" />
<span className="text-sm text-white">
{skill.name}
</span>
</div>
<div className="flex items-center gap-2">
{skillEval?.level && (
<span className="text-xs text-slate-400">
{skillEval.level === "never" &&
"Jamais utilisé"}
{skillEval.level === "not-autonomous" &&
"Non autonome"}
{skillEval.level === "autonomous" &&
"Autonome"}
{skillEval.level === "expert" && "Expert"}
</span>
)}
</div>
</div>
);
})}
</div>
<div className="mt-3 pt-3 border-t border-white/10">
<Button
asChild
className="w-full bg-blue-500 hover:bg-blue-600 text-white"
>
<Link
href={`/evaluation?category=${encodeURIComponent(
category.category
)}`}
>
<ExternalLink className="w-4 h-4 mr-2" />
Évaluer {category.category}
</Link>
</Button>
</div>
</div>
)}
</div>
);
})}