47 lines
1.5 KiB
JavaScript
47 lines
1.5 KiB
JavaScript
import SingleProject from "./SingleProject.jsx";
|
|
import "../styles/Projects.css"
|
|
import React, {useEffect, useState} from "react";
|
|
function Projects() {
|
|
const [projects, setProjects] = useState([]);
|
|
const [error, setError] = useState(null);
|
|
|
|
useEffect(() => {
|
|
const fetchProjects = async () => {
|
|
try {
|
|
const response = await fetch('/api/projects/');
|
|
if (!response.ok) {
|
|
throw new Error(`Erreur HTTP: ${response.status}`);
|
|
}
|
|
const data = await response.json();
|
|
setProjects(data.data);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
}
|
|
};
|
|
fetchProjects();
|
|
}, []);
|
|
|
|
if (error) {
|
|
return <div>Erreur lors de la récupération des données : {error}</div>;
|
|
}
|
|
|
|
|
|
return (
|
|
<section id="projects-section">
|
|
<h1 className="section-title">Projects</h1>
|
|
<div className="projects-section-list">
|
|
{projects.map(project => (
|
|
<SingleProject image={project.image_name} title={project.title} description={project.description} skills={project.skills} color={project.color} nbImage={project.nb_image}/>
|
|
))}
|
|
</div>
|
|
<div className="show-more-container">
|
|
<p className="show-more-link">
|
|
Show more
|
|
</p>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
|
|
export default Projects |