reorganization of the tree structure

2025-09-02 19:17:00 +02:00
parent cf37db8c88
commit 50485a4f55
22 changed files with 23 additions and 23 deletions
@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react';
+import SkillCard from "../SkillCard/SkillCard.jsx";
+import "./Skills.css";
+
+function Skills() {
+    const [skills, setSkills] = useState([]);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const fetchSkills = async () => {
+            try {
+                const response = await fetch('/api/skills/');
+                if (!response.ok) {
+                    throw new Error(`Erreur HTTP: ${response.status}`);
+                }
+                const data = await response.json();
+                setSkills(data.data);
+            } catch (err) {
+                setError(err.message);
+            }
+        };
+        fetchSkills();
+    }, []);
+
+    if (error) {
+        return <div>Error retrieving data: {error}</div>;
+    }
+
+    const uniqueSkillTypes = [...new Set(skills.map(skill => skill.type))];
+
+
+    return (
+        <section id="skills-section">
+            <h1 className="section-title">Skills</h1>
+            {uniqueSkillTypes.map(type => (
+                <div id="languages" className="skill-category">
+                    <h2>{type}</h2>
+                    <div className="skills">
+                        {skills
+                            .filter(skill => skill.type === type)
+                            .map(skill => (
+                                <SkillCard text={skill.name}/>
+                            ))}
+                    </div>
+                </div>
+            ))}
+        </section>
+    )
+}
+
+
+export default Skills