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

97
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,16 +151,41 @@ 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="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
@@ -179,6 +207,69 @@ export default function HomePage() {
></div>
</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>
);
})}
</div>

5
components/evaluation/category-tabs.tsx
View File

@@ -1,5 +1,6 @@
import { ChevronRight } from "lucide-react";
import { SkillCategory } from "@/lib/types";
import { getCategoryIcon } from "@/lib/category-icons";
interface CategoryTabsProps {
categories: SkillCategory[];
@@ -16,12 +17,13 @@ export function CategoryTabs({
<div className="flex flex-wrap gap-2 mb-8">
{categories.map((category) => {
const isActive = selectedCategory === category.category;
const CategoryIcon = getCategoryIcon(category.icon);
return (
<button
key={category.category}
onClick={() => onCategoryChange(category.category)}
className={`
relative px-6 py-3 rounded-xl font-medium transition-all duration-300 group
relative px-6 py-3 rounded-xl font-medium transition-all duration-300 group flex items-center gap-2
${
isActive
? "bg-blue-500 text-white shadow-lg shadow-blue-500/25"
@@ -29,6 +31,7 @@ export function CategoryTabs({
}
`}
>
<CategoryIcon className="w-4 h-4 relative z-10" />
<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" />

23
components/evaluation/skill-evaluation-card.tsx
View File

@@ -94,17 +94,16 @@ export function SkillEvaluationCard({
</div>
{/* Level Selection */}
<div className="flex items-center gap-2 flex-shrink-0 ml-4">
<div className="flex items-center gap-3 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>
<div key={value} className="flex items-center gap-1.5">
<button
onClick={() => onUpdateSkill(skill.id, levelValue)}
className={`
relative w-5 h-5 rounded-md border-2 transition-all hover:scale-110
relative w-4 h-4 rounded-md border-2 transition-all hover:scale-110
${
isSelected
? `${getLevelColor(levelValue)} ${getLevelColorBorder(
@@ -118,11 +117,17 @@ export function SkillEvaluationCard({
<div className="absolute inset-0.5 bg-white rounded-sm"></div>
)}
</button>
</TooltipTrigger>
<TooltipContent>
<p className="text-sm font-medium">{label}</p>
</TooltipContent>
</Tooltip>
<span
className={`text-xs font-medium transition-colors cursor-pointer ${
isSelected
? "text-white"
: "text-slate-400 hover:text-slate-300"
}`}
onClick={() => onUpdateSkill(skill.id, levelValue)}
>
{label}
</span>
</div>
);
})}

2
components/evaluation/skill-evaluation-grid.tsx
View File

@@ -37,7 +37,7 @@ export function SkillEvaluationGrid({
</div>
</div>
<div className="space-y-2">
<div className="space-y-3">
{currentEvaluation.selectedSkillIds.map((skillId) => {
const skill = currentCategory.skills.find((s) => s.id === skillId);
if (!skill) return null;

26
components/skill-evaluation.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { useState } from "react";
import { useState, useEffect } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import { TooltipProvider } from "@/components/ui/tooltip";
import { SkillCategory, SkillLevel, CategoryEvaluation } from "@/lib/types";
import { SkillSelector } from "./skill-selector";
@@ -26,10 +27,31 @@ export function SkillEvaluation({
onAddSkill,
onRemoveSkill,
}: SkillEvaluationProps) {
const searchParams = useSearchParams();
const router = useRouter();
const categoryParam = searchParams.get("category");
const [selectedCategory, setSelectedCategory] = useState(
categories[0]?.category || ""
);
const handleCategoryChange = (category: string) => {
setSelectedCategory(category);
// Update URL without page reload
const newUrl = new URL(window.location.href);
newUrl.searchParams.set("category", category);
router.replace(newUrl.pathname + newUrl.search);
};
// Update selected category when URL param changes or categories load
useEffect(() => {
if (categoryParam && categories.some((c) => c.category === categoryParam)) {
setSelectedCategory(categoryParam);
} else if (categories.length > 0 && !selectedCategory) {
setSelectedCategory(categories[0].category);
}
}, [categoryParam, categories]); // Remove selectedCategory from deps to avoid loop
const currentCategory = categories.find(
(cat) => cat.category === selectedCategory
);
@@ -55,7 +77,7 @@ export function SkillEvaluation({
<CategoryTabs
categories={categories}
selectedCategory={selectedCategory}
onCategoryChange={setSelectedCategory}
onCategoryChange={handleCategoryChange}
/>
<div className="space-y-8">

1
data/skills/backend.json
View File

@@ -1,5 +1,6 @@
{
"category": "Backend",
"icon": "server",
"skills": [
{
"id": "nodejs",

1
data/skills/devops.json
View File

@@ -1,5 +1,6 @@
{
"category": "DevOps",
"icon": "settings",
"skills": [
{
"id": "docker",

1
data/skills/frontend.json
View File

@@ -1,5 +1,6 @@
{
"category": "Frontend",
"icon": "monitor",
"skills": [
{
"id": "react",

1
data/skills/mobile.json
View File

@@ -1,5 +1,6 @@
{
"category": "Mobile",
"icon": "smartphone",
"skills": [
{
"id": "reactnative",

18
lib/category-icons.ts Normal file
View File

@@ -0,0 +1,18 @@
import {
Monitor,
Server,
Settings,
Smartphone,
LucideIcon
} from "lucide-react";
const CATEGORY_ICON_MAP: Record<string, LucideIcon> = {
monitor: Monitor,
server: Server,
settings: Settings,
smartphone: Smartphone,
};
export function getCategoryIcon(iconName: string): LucideIcon {
return CATEGORY_ICON_MAP[iconName] || Settings; // Settings as fallback
}

1
lib/types.ts
View File

@@ -28,6 +28,7 @@ export interface Skill {
export interface SkillCategory {
category: string;
icon: string;
skills: Skill[];
}

1
public/data/skills/backend.json
View File

@@ -1,5 +1,6 @@
{
"category": "Backend",
"icon": "server",
"skills": [
{
"id": "nodejs",

1
public/data/skills/devops.json
View File

@@ -1,5 +1,6 @@
{
"category": "DevOps",
"icon": "settings",
"skills": [
{
"id": "docker",

1
public/data/skills/frontend.json
View File

@@ -1,5 +1,6 @@
{
"category": "Frontend",
"icon": "monitor",
"skills": [
{
"id": "react",

1
public/data/skills/mobile.json
View File

@@ -1,5 +1,6 @@
{
"category": "Mobile",
"icon": "smartphone",
"skills": [
{
"id": "reactnative",