remove of image carousel

src/components/SingleProject/SingleProject.jsx

@@ -2,55 +2,14 @@ import { useState, useEffect, useRef } from "react";
 import SkillCard from "../SkillCard/SkillCard.jsx";
 import "./SingleProject.css";
 
-function SingleProject({ image, title, description, skills, id, nbImage, school, beginningYear, endYear }) {
-    const [imageID, setImageID] = useState(1);
-    const [isFading, setIsFading] = useState(true);
-    const intervalRef = useRef(null);
+function SingleProject({ image, title, description, skills, id, school, beginningYear, endYear }) {
     const color = ["blue", "green", "purple", "red", "yellow"]
 
-    const handleChangeImage = (direction) => {
-        if (nbImage <= 1) return;
-
-        setIsFading(false);
-
-        setTimeout(() => {
-            setImageID((prevID) =>
-                direction === 1
-                    ? (prevID % nbImage) + 1
-                    : prevID === 1 ? nbImage : prevID - 1
-            );
-            setIsFading(true);
-        }, 300);
-
-        clearInterval(intervalRef.current);
-        startAutoSlide();
-    };
-
-    const startAutoSlide = () => {
-        intervalRef.current = setInterval(() => {
-            handleChangeImage(1);
-        }, 5000);
-    };
-
-    useEffect(() => {
-        startAutoSlide();
-        return () => clearInterval(intervalRef.current);
-    }, []);
-
     return (
         <div className="single-project">
             <div className="single-project-top">
-                <button onClick={() => handleChangeImage(-1)} className="arrow preview">{'<'}</button>
-
-                <img
-                    src={`/assets/images/${image}/${image}_${imageID}.png`}
-                    alt={image}
-                    className={isFading ? 'fade-in' : 'fade-out'}
-                />
-
-                <button onClick={() => handleChangeImage(1)} className="arrow next">{'>'}</button>
+                <img src={`/assets/images/projects/${image}/${image}_1.png`} alt={image}/>
             </div>
-
             <div className="single-project-bottom">
                 <div className="single-project-bottom-header">
                     <div className="single-project-title-wrapper">