bug: code carousel list doesnt work

src/components/Carousel.js

@@ -3,106 +3,15 @@ import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import Docusaurus from "/static/img/docusaurus.png";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import CarouselData from './CarouselData';
 
-
-// function Carousel() {
-
-//   const settings = {
-//     dots: true,
-//     infinite: true,
-//     slidesToShow: 3,
-//     slidesToScroll: 1,
-//     autoplay: true,
-//     speed: 2000,
-//     autoplaySpeed: 2000,
-//     cssEase: "linear"
-//   };
-
-//   return (
-
-//   <div>
-//       <h2>Auto Play</h2>
-//       <Slider {...settings}>
-//         <div>
-//           <a href="https://lab.frogg.it/froggit" target="_blank" rel="noreferrer">
-//             <img className="footer_icons" src={Docusaurus} alt="Logo Froggit blanc" />
-//           </a>
-//         </div>
-//         <div>
-//           <a href="https://lab.frogg.it/froggit" target="_blank" rel="noreferrer">
-//             <img className="footer_icons" src={Docusaurus} alt="Logo Froggit blanc" />
-//           </a>
-//         </div>
-//         <div>
-//           <a href="https://lab.frogg.it/froggit" target="_blank" rel="noreferrer">
-//             <img className="footer_icons" src={Docusaurus} alt="Logo Froggit blanc" />
-//           </a>
-//         </div>
-//         <div>
-//           <a href="https://lab.frogg.it/froggit" target="_blank" rel="noreferrer">
-//             <img className="footer_icons" src={Docusaurus} alt="Logo Froggit blanc" />
-//           </a>
-//         </div>
-//         <div>
-//           <a href="https://lab.frogg.it/froggit" target="_blank" rel="noreferrer">
-//             <img className="footer_icons" src={Docusaurus} alt="Logo Froggit blanc" />
-//           </a>
-//         </div>
-//         <div>
-//           <a href="https://lab.frogg.it/froggit" target="_blank" rel="noreferrer">
-//             <img className="footer_icons" src={Docusaurus} alt="Logo Froggit blanc" />
-//           </a>
-//         </div>
-//       </Slider>
-//     </div>
-// )
-// }
-
-// export default Carousel
-
-
-
-// function Carousel() {
-//   const Users = () => {
-//     const data = [
-//       { id: 1, name: "John Doe" },
-//       { id: 2, name: "Victor Wayne" },
-//       { id: 3, name: "Jane Doe" },
-//     ];
-  
-//     return (
-//       <div className="users">
-//         {data.map((user) => (
-//           <div className="user">{user}</div>
-//         ))}
-//       </div>
-//     );
-//   };
-// }
-
-//methode de base
-// function Carousel() {
-//   const names = ["Mamad", "Lola", "Shau"]
-
-//     return (
-//       <div>
-//         <h2>{names[0]}</h2>
-//         <h2>{names[1]}</h2>
-//         <h2>{names[2]}</h2>
-//       </div>
-//     )
-
-// }
-
-//methode de map
-// function Carousel() {
-//   const names = ["Mamad", "Lola", "Shau"]
-//   const nameList =  names.map(name => <h2>{name}</h2>)
-//   return <div>{nameList}</div>
-// }
-
-// methode list
-function Carousel() {
+// const personList =  persons.map(person => (
+//   <h2>{person.name}</h2>
+//   <img src={useBaseUrl(person.img)} />
+// ))
+// return <Slider {...settings}><div>{personList}</div></Slider>
+function Carousel({imgcarousel, link}) {
 
   const settings = {
     dots: true,
@@ -113,33 +22,15 @@ function Carousel() {
     speed: 2000,
     autoplaySpeed: 2000,
     cssEase: "linear"
-};
-
-  const persons = [
-    {
-      id: 1,
-      name: "Mamad",
-      img: "http://www.dixielandtarragona.com/wp-content/uploads/2020/08/grandparent-totoro-FB-696x365.jpg",
-    },
-    {
-      id: 2,
-      name: "Lola",
-      img: "http://www.dixielandtarragona.com/wp-content/uploads/2020/08/grandparent-totoro-FB-696x365.jpg",
-    },
-    {
-      id: 3,
-      name: "Lesli",
-      img: "http://www.dixielandtarragona.com/wp-content/uploads/2020/08/grandparent-totoro-FB-696x365.jpg",
-    }
-  ]
-
-  const personList =  persons.map(person => (
-    <h2>{person.name}</h2>
-  ))
-  return <Slider {...settings}><div>{personList}</div></Slider>
-  
-  
+  };
 }
 
-
-export default Carousel
+export default function TheCarousels() {
+  return (
+    <div>
+      {CarouselList.map((imgcarousel, link) => (
+        <Carousel key={CarouselList} />
+      ))}
+    </div>
+  );
+}

src/components/CarouselData.js

+import React from 'react';
+
+function CarouselData () {
+const CarouselList = [
+    
+{
+    name: "Mamad",
+    imgcarousel: "/static/img/docusaurus.png",
+    link: "",
+},
+{
+    name: "Lola",
+    imgcarousel: "/static/img/docusaurus.png",
+    link: "",
+},
+{
+    name: "Lesli",
+    imgcarousel: "/static/img/docusaurus.png",
+    link: "",
+}
+]
+}
+
+export default CarouselData