reafctor: pages for management and split components

2025-08-23 08:16:09 +02:00
parent 97d274190d
commit 2e195ca5cf
29 changed files with 1968 additions and 1607 deletions
--- a/components/admin/skills/skills-list.tsx
+++ b/components/admin/skills/skills-list.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import {
+  Code2,
+  Palette,
+  Database,
+  Cloud,
+  Shield,
+  Smartphone,
+  Layers,
+} from "lucide-react";
+import { TreeCategoryHeader, TreeItemRow } from "@/components/admin";
+import { TechIcon } from "@/components/icons/tech-icon";
+import { Skill } from "@/services/admin-management-service";
+
+interface SkillsListProps {
+  filteredSkillsByCategory: Record<string, Skill[]>;
+  expandedCategories: Set<string>;
+  onToggleCategory: (category: string) => void;
+  onEditSkill: (skill: Skill) => void;
+  onDeleteSkill: (skillId: string) => void;
+}
+
+export function SkillsList({
+  filteredSkillsByCategory,
+  expandedCategories,
+  onToggleCategory,
+  onEditSkill,
+  onDeleteSkill,
+}: SkillsListProps) {
+  // Fonction pour obtenir l'icône de la catégorie
+  const getCategoryIcon = (category: string) => {
+    const categoryName = category.toLowerCase();
+    if (categoryName.includes("frontend") || categoryName.includes("front"))
+      return Code2;
+    if (categoryName.includes("backend") || categoryName.includes("back"))
+      return Layers;
+    if (
+      categoryName.includes("design") ||
+      categoryName.includes("ui") ||
+      categoryName.includes("ux")
+    )
+      return Palette;
+    if (categoryName.includes("data") || categoryName.includes("database"))
+      return Database;
+    if (categoryName.includes("cloud") || categoryName.includes("devops"))
+      return Cloud;
+    if (categoryName.includes("security") || categoryName.includes("securité"))
+      return Shield;
+    if (
+      categoryName.includes("mobile") ||
+      categoryName.includes("android") ||
+      categoryName.includes("ios")
+    )
+      return Smartphone;
+    return Code2; // Par défaut
+  };
+
+  return (
+    <>
+      {Object.entries(filteredSkillsByCategory).map(
+        ([category, categorySkills], index) => (
+          <div key={category}>
+            <TreeCategoryHeader
+              category={category}
+              isExpanded={expandedCategories.has(category)}
+              onToggle={() => onToggleCategory(category)}
+              icon={(() => {
+                const IconComponent = getCategoryIcon(category);
+                return <IconComponent className="w-5 h-5 text-blue-400" />;
+              })()}
+              itemCount={categorySkills.length}
+              itemLabel="skill"
+              showSeparator={index > 0}
+            />
+
+            {/* Liste des skills de la catégorie */}
+            {expandedCategories.has(category) && (
+              <div className="bg-slate-950/30">
+                {categorySkills.map((skill, skillIndex) => (
+                  <TreeItemRow
+                    key={skill.id}
+                    icon={
+                      <div className="flex items-center gap-3">
+                        <TechIcon
+                          iconName={skill.icon}
+                          className="w-5 h-5 text-green-400"
+                          fallbackText={skill.name}
+                        />
+                        <div className="p-1 bg-green-500/20 border border-green-500/30 rounded text-xs font-mono text-green-400 min-w-[3rem] text-center shrink-0">
+                          {skill.icon || "?"}
+                        </div>
+                      </div>
+                    }
+                    title={skill.name}
+                    subtitle={skill.description}
+                    badges={[
+                      {
+                        text: `${skill.usageCount} util.`,
+                        variant: "outline",
+                      },
+                    ]}
+                    onEdit={() => onEditSkill(skill)}
+                    onDelete={() => onDeleteSkill(skill.id)}
+                    canDelete={skill.usageCount === 0}
+                    showSeparator={skillIndex > 0}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        )
+      )}
+    </>
+  );
+}