fe63f9592a
- 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.
45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { ChevronRight } from "lucide-react";
|
|
import { SkillCategory } from "@/lib/types";
|
|
import { getCategoryIcon } from "@/lib/category-icons";
|
|
|
|
interface CategoryTabsProps {
|
|
categories: SkillCategory[];
|
|
selectedCategory: string;
|
|
onCategoryChange: (category: string) => void;
|
|
}
|
|
|
|
export function CategoryTabs({
|
|
categories,
|
|
selectedCategory,
|
|
onCategoryChange,
|
|
}: CategoryTabsProps) {
|
|
return (
|
|
<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 flex items-center gap-2
|
|
${
|
|
isActive
|
|
? "bg-blue-500 text-white shadow-lg shadow-blue-500/25"
|
|
: "bg-white/5 text-slate-300 hover:bg-white/10 border border-white/10 hover:border-white/20"
|
|
}
|
|
`}
|
|
>
|
|
<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" />
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|