feat: test on conditionnal

src/components/Carousel.js

-import React from "react";
-import clsx from "clsx";
-import Slider from "react-slick";
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import styles from "./Carousel.module.css";
+// import React from "react";
+// import clsx from "clsx";
+// import Slider from "react-slick";
+// import "slick-carousel/slick/slick.css";
+// import "slick-carousel/slick/slick-theme.css";
+// import useBaseUrl from "@docusaurus/useBaseUrl";
+// import styles from "./Carousel.module.css";
+const CarouselList = [
+  {
+    names: "Acceuil",
+    img: "/img/docusaurus.png",
+    link: "https://froggit.fr/",
+  },
+  {
+    names: "FAQ",
+    img: "/img/bouclier.svg",
+    link: "/faq",
+  },
+  {
+    names: "Communauté",
+    img: "/img/docusaurus.png",
+    link: "/communaute",
+  },
+  {
+    names: "Acceuil",
+    img: "/img/docusaurus.png",
+    link: "https://froggit.fr/",
+  },
+  {
+    names: "Tarifs",
+    img: "/img/logo_typo_froggit.png",
+    link: "/tarifs",
+  },
+  {
+    names: "Communauté",
+    img: "/img/docusaurus.png",
+    link: "/communaute",
+  }
+];
 
+console.log("coucou")
 //on retrouve ttes les var du composant CarouselElement
 //Les images doivent avoir toute la même taille
 //si le link est null/empty, alors ne pas afficher d'hyperlien
 // si le nombre d'image ne vaut pas la "taille", 
-function CarouselElement({name, img, link}) {
+function CarouselElement({names, img, link}) {
+  console.log("Coucou deux")
 
-  return (
-    /* <div className="text--center"> */
-    <div className="img_carousel">
-      <a href={link} target="_blank" rel="noopener noreferrer">
-        <img src={useBaseUrl(img)} />
-        <h6>{name}</h6>
-      </a>
-    </div>
-  );
+  // if (CarouselList) {
+  //   link == null;
+  //   console.log(delete CarouselList.link)
+
+
+    // return (
+    //   delete CarouselList.link;
+    // )
+
+
+
+  // }
+  // else {
+  //   console.log("salut");
+  // }
+}
+
+CarouselElement = (linkdel) => {
+  const newLinkDel = this.state.links.filter(element.name !== (linkdel.name));
+  this.setState({links:newLinkDel});
+  console.log(newLinkDel + "c'est ici");
 }
+
+console.log(CarouselElement.names);
+  // return (
+    /* <div className="text--center"> */
+
+
+//     <div>
+//       <a href={link} target="_blank" rel="noopener noreferrer">
+//         <img src={useBaseUrl(img)} className="carousel-img" />
+//         <h6>{name}</h6>
+//       </a>
+//     </div>
+//   );
+// }
   
 // https://fr.reactjs.org/docs/lists-and-keys.html
-export default function Carousel(props) {
-  const list = props.list;
+// export default function Carousel(props) {
+//   const list = props.list;
+
+
+
+
+
   // return (
   //   <section className="section-carousel">    
   //     <div className="row">
@@ -39,27 +104,27 @@ export default function Carousel(props) {
   //Ralentir la vitesse
   //augmenter le nombre d'éléments à afficher
 
-  const settings = {
-    dots: true,
-    infinite: true,
-    slidesToShow: 5,
-    slidesToScroll: 1,
-    autoplay: true,
-    speed: 4000,
-    autoplaySpeed: 4000,
-    cssEase: "linear"
-  };
+  // const settings = {
+  //   dots: true,
+  //   infinite: true,
+  //   slidesToShow: 5,
+  //   slidesToScroll: 1,
+  //   autoplay: true,
+  //   speed: 4000,
+  //   autoplaySpeed: 4000,
+  //   cssEase: "linear"
+  // };
 
   // On a un carousel qui affiche un élément de la liste
-  return (
-    <div>
-      <Slider {...settings}>
+//   return (
+//     <div>
+//       <Slider {...settings}>
 
-        {list.map((props, idx) => (
-          <CarouselElement key={idx} {...props} />
-        ))}
+//         {list.map((props, idx) => (
+//           <CarouselElement key={idx} {...props} />
+//         ))}
 
-      </Slider>
-    </div>
-  );
-}
+//       </Slider>
+//     </div>
+//   );
+// }

src/components/Carousel.module.css

-.slick-slide img {
-    background-color: aqua;
+/* .slick-slider .carousel-img {
+    margin: 20px;
+    width: 20px;
+} */
+
+
+
+/* .slick-slider .slick-initialized img{
+    margin: 20px;
+    width: 20px;
+} */
+
+.slick-list img {
+    margin: 20px;
+    width: 20px;
+}
+
+.carousel-img .slick-slider {
+    margin: 20px;
+    width: 20px;
 }
\ No newline at end of file

src/components/CarouselLibre.js

-import React from "react";
-import Carousel from "./Carousel";
+// import React from "react";
+// import Carousel from "./Carousel";
 
 const CarouselList = [
   {
@@ -34,11 +34,13 @@ const CarouselList = [
   }
 ];
 
-export default function CarouselLibre() {
-  return (
-    //on donne la liste au composant carousel
-    //le composant carousel a comme props l'objet carousel list
+// export default function CarouselLibre() {
+//   return (
+//     //on donne la liste au composant carousel
+//     //le composant carousel a comme props l'objet carousel list
     
-    <Carousel list={CarouselList} />
-  );
-}
+//     <Carousel list={CarouselList} />
+//   );
+// }
+
+console.log(delete CarouselList.link)
\ No newline at end of file