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 CarouselList = [
+  {
+    name: "Home",
+    img: "/img/docusaurus.png",
+    link: "",
+  },
+  {
+    name: "Price",
+    img: "/img/docusaurus.png",
+    link: "",
+  },
+  {
+    name: "Community",
+    img: "/img/docusaurus.png",
+    link: "",
+  }
+]
 
 // 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 +40,27 @@ function Carousel({imgcarousel, link}) {
     autoplaySpeed: 2000,
     cssEase: "linear"
   };
-}
 
-export default function TheCarousels() {
   return (
-    <div>
-      {CarouselList.map((imgcarousel, link) => (
-        <Carousel key={CarouselList} />
-      ))}
+    <div className={clsx("col col--4")}>
+      <div className="text--center">
+        <img src={useBaseUrl(img)} />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <h6>{name}</h6>
+      </div>
     </div>
   );
 }
+
+export default function Carousel() {
+  return (
+    <section className="section-carousel">    
+      <div className="row">
+        {CarouselList.map((props, idx) => (
+          <CarouselElement key={idx} {...props} />
+        ))}
+      </div>   
+    </section>
+  );
+}