52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
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 |