fix: add carousel component base

src/components/Carousel.js

-// import React from "react";
-// import useBaseUrl from "@docusaurus/useBaseUrl";
-// 
-// export default function Carousel({img}) {
-//   return (
-//     <>
-//       <div className="row">
-//         <div className="col-box">
-//           <img src={useBaseUrl(img)} />
-//         </div>
-//       </div>
-//     </>
-//   );
-// }
-import Slider from 'react-slick'
+import React from 'react'
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
 
-import 'slick-carousel/slick/slick.css'
-import 'slick-carousel/slick/slick-theme.css'
 
-export default function Carousel() {
+function Carousel() {
 
-  const sliderSettings = {
+  const settings = {
+    dots: true,
+    infinite: true,
     slidesToShow: 3,
     slidesToScroll: 1,
-    infinite: false,
-  }
-
-  const hotelCards = [
-    {
-      imageSrc:
-        'https://images.unsplash.com/photo-1559508551-44bff1de756b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80',
-      title: 'Studio Room',
-      description: 'Lorem ipsum dolor sit amet, consectur dolori',
-      pricingText: 'USD 50/Day',
-      features: ['Free Wifi', 'Free breakfast'],
-    },
-    {
-      imageSrc:
-        'https://images.unsplash.com/photo-1616940844649-535215ae4eb1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80',
-      title: 'Deluxe Room',
-      description: 'Lorem ipsum dolor sit amet, consectur dolori',
-      pricingText: 'USD 80/Day',
-      features: ['Free Wifi', 'Free breakfast'],
-    },
-    {
-      imageSrc:
-        'https://images.unsplash.com/photo-1599619351208-3e6c839d6828?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80',
-      title: 'King Deluxe Room',
-      description: 'Lorem ipsum dolor sit amet, consectur dolori',
-      pricingText: 'USD 150/Day',
-      features: ['Free Wifi', 'Free breakfast', 'Discounted Meals'],
-    },
-    {
-      imageSrc:
-        'https://images.unsplash.com/photo-1461092746677-7b4afb1178f6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80',
-      title: 'Royal Suite',
-      description: 'Lorem ipsum dolor sit amet, consectur dolori',
-      pricingText: 'USD 299/Day',
-      features: [
-        'Free Wifi',
-        'Free breakfast',
-        'Discounted Meals',
-        "MacBook for work use (hotel's property)",
-      ],
-    },
-  ]
+    autoplay: true,
+    speed: 2000,
+    autoplaySpeed: 2000,
+    cssEase: "linear"
+  };
 
   return (
-    <div className='content'>
-      <Slider {...sliderSettings}>
-        {hotelCards.map((card, index) => (
-          <div key={index}>
-            <h2>{card.title}</h2>
-            <img alt={card.title} src={card.imageSrc} width="100" height="100" />
-            <p>{card.description}</p>
-            <ul>
-              {card.features.map((feature, index) => (
-                <li key={index}>{feature}</li>
-              ))}
-            </ul>
-            <button className='btn'>Buy Now</button>
-          </div>
-        ))}
+
+  <div>
+      <h2>Auto Play</h2>
+      <Slider {...settings}>
+        <div>
+          <h3>1</h3>
+        </div>
+        <div>
+          <h3>2</h3>
+        </div>
+        <div>
+          <h3>3</h3>
+        </div>
+        <div>
+          <h3>4</h3>
+        </div>
+        <div>
+          <h3>5</h3>
+        </div>
+        <div>
+          <h3>6</h3>
+        </div>
       </Slider>
     </div>
-  )
+)
 }
+
+export default Carousel

src/pages/dummy_page.mdx

@@ -11,14 +11,7 @@ echo "Hello World"
 
 ## Hello mon carousel !
 
-<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
-    <div><h3>1</h3></div>
-    <div><h3>2</h3></div>
-    <div><h3>3</h3></div>
-    <div><h3>4</h3></div>
-    <div><h3>5</h3></div>
-    <div><h3>6</h3></div>
-</div>
+<Carousel />
 
 :::note