init

components/evaluation/category-tabs.tsx

@@ -0,0 +1,41 @@
+import { ChevronRight } from "lucide-react";
+import { SkillCategory } from "@/lib/types";
+
+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;
+        return (
+          <button
+            key={category.category}
+            onClick={() => onCategoryChange(category.category)}
+            className={`
+              relative px-6 py-3 rounded-xl font-medium transition-all duration-300 group
+              ${
+                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"
+              }
+            `}
+          >
+            <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>
+  );
+}