Resolve "create a carousel component"

Closes #90 (closed)

src/components/Carousel.js

-import React from 'react'
-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 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 CarouselData from './CarouselData';
 
-// 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}) {
+function CarouselElement({name, img, link}) {
 
   const settings = {
     dots: true,
@@ -23,14 +17,28 @@ function Carousel({imgcarousel, link}) {
     autoplaySpeed: 2000,
     cssEase: "linear"
   };
-}
 
-export default function TheCarousels() {
   return (
-    <div>
-      {CarouselList.map((imgcarousel, link) => (
-        <Carousel key={CarouselList} />
-      ))}
+    <div className="text--center">
+      <a href={link} target="_blank" rel="noopener noreferrer">
+        <img src={useBaseUrl(img)} />
+        <h6>{name}</h6>
+      </a>
     </div>
   );
 }
+
+// https://fr.reactjs.org/docs/lists-and-keys.html
+export default function Carousel(props) {
+  const list = props.list;
+
+  return (
+    <section className="section-carousel">    
+      <div className="row">
+        {list.map((props, idx) => (
+          <CarouselElement key={idx} {...props} />
+        ))}
+      </div>   
+    </section>
+  );
+}