85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { TooltipProvider } from "@/components/ui/tooltip";
|
|
import { SkillCategory, SkillLevel, CategoryEvaluation } from "@/lib/types";
|
|
import { SkillSelector } from "./skill-selector";
|
|
import {
|
|
EvaluationHeader,
|
|
SkillLevelLegend,
|
|
CategoryTabs,
|
|
SkillEvaluationGrid,
|
|
} from "./evaluation";
|
|
|
|
interface SkillEvaluationProps {
|
|
categories: SkillCategory[];
|
|
evaluations: CategoryEvaluation[];
|
|
onUpdateSkill: (category: string, skillId: string, level: SkillLevel) => void;
|
|
onAddSkill: (category: string, skillId: string) => void;
|
|
onRemoveSkill: (category: string, skillId: string) => void;
|
|
}
|
|
|
|
export function SkillEvaluation({
|
|
categories,
|
|
evaluations,
|
|
onUpdateSkill,
|
|
onAddSkill,
|
|
onRemoveSkill,
|
|
}: SkillEvaluationProps) {
|
|
const [selectedCategory, setSelectedCategory] = useState(
|
|
categories[0]?.category || ""
|
|
);
|
|
|
|
const currentCategory = categories.find(
|
|
(cat) => cat.category === selectedCategory
|
|
);
|
|
const currentEvaluation = evaluations.find(
|
|
(evaluation) => evaluation.category === selectedCategory
|
|
);
|
|
|
|
if (!currentCategory) {
|
|
return <div>Aucune catégorie disponible</div>;
|
|
}
|
|
|
|
return (
|
|
<TooltipProvider>
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
|
|
{/* Background Effects */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-slate-900 to-slate-950" />
|
|
<div className="absolute inset-0 bg-grid-white/5 bg-[size:50px_50px]" />
|
|
<div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-transparent to-transparent" />
|
|
|
|
<div className="relative z-10 container mx-auto px-6 py-8 max-w-7xl">
|
|
<EvaluationHeader />
|
|
|
|
<CategoryTabs
|
|
categories={categories}
|
|
selectedCategory={selectedCategory}
|
|
onCategoryChange={setSelectedCategory}
|
|
/>
|
|
|
|
<div className="space-y-8">
|
|
<SkillSelector
|
|
categories={categories}
|
|
evaluations={evaluations}
|
|
selectedCategory={selectedCategory}
|
|
onAddSkill={onAddSkill}
|
|
onRemoveSkill={onRemoveSkill}
|
|
/>
|
|
|
|
{currentEvaluation && (
|
|
<SkillEvaluationGrid
|
|
currentCategory={currentCategory}
|
|
currentEvaluation={currentEvaluation}
|
|
onUpdateSkill={onUpdateSkill}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<SkillLevelLegend />
|
|
</div>
|
|
</div>
|
|
</TooltipProvider>
|
|
);
|
|
}
|