l-min-components 1.0.1094 → 1.0.1096

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.1094",
+  "version": "1.0.1096",
   "type": "module",
   "files": [
     "src/assets",

package/src/components/banner/developerBanner.jsx

@@ -1,40 +1,35 @@
 import React, { useContext, useRef } from "react";
-import { DevBannerWrapper } from "./styles";
+import { DevBannerWrapper, DotHolder } from "./styles";
 import BannerImg from "./assets/book.png";
 import BannerImg2 from "./assets/pack.png";
 import BannerImg3 from "./assets/globe.png";
 import Button from "../button";
-// import Slider from "react-slick";
-// import "slick-carousel/slick/slick.css";
-// import "slick-carousel/slick/slick-theme.css";
 import "pure-react-carousel/dist/react-carousel.es.css";
-import {
-  CarouselProvider,
-  Slider,
-  Slide,
-  ButtonBack,
-  ButtonNext,
-  DotGroup,
-} from "pure-react-carousel";
+import { CarouselProvider, Slider, Slide, DotGroup } from "pure-react-carousel";
 
 const DeveloperBanner = ({ findText }) => {
-  // const settings = {
-  //   dots: true,
-  //   infinite: true,
-  //   speed: 500,
-  //   slidesToShow: 1,
-  //   slidesToScroll: 1,
-  //   autoplay: true,
-  //   autoplaySpeed: 10000,
-  //   pauseOnHover: true
-  // };
   const ref = useRef();
+
+  // function to create slider dots
+  const createDots = ({ totalSlides, currentSlide }) => {
+    console.log(totalSlides, "lala");
+    let arr = [];
+    for (let index = 1; index <= totalSlides; index++) {
+      arr.push(index);
+    }
+    return arr.map((item) => {
+      return (
+        <span className={item === currentSlide + 1 ? "active" : ""}></span>
+      );
+    });
+  };
+
   return (
     <DevBannerWrapper>
       <CarouselProvider
         totalSlides={3}
         naturalSlideWidth={232}
-        naturalSlideHeight={625}
+        naturalSlideHeight={590}
         visibleSlides={1}
         infinite
         // isIntrinsicHeight={true}
@@ -154,9 +149,7 @@ const DeveloperBanner = ({ findText }) => {
         </Slider>
         <DotGroup
           renderDots={(e) => {
-            console.log(e, "lala");
-
-            return <span>1</span>;
+            return <DotHolder>{createDots(e)}</DotHolder>;
           }}
         />
       </CarouselProvider>

package/src/components/banner/styles/index.jsx

@@ -181,3 +181,29 @@ export const DevBannerWrapper = styled.div`
     height: auto;
   }
 `;
+
+export const DotHolder = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  position: absolute;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  > span {
+    width: 8px;
+    height: 8px;
+    background: #d9d9d9;
+    border-radius: 100%;
+    padding: 0;
+    transition: all 0.2s ease-in-out;
+    &.active {
+      background: #febf10;
+      width: 39px !important;
+      height: 5px !important;
+      border-radius: 0;
+    }
+  }
+`;