l-min-components 1.0.1094 → 1.0.1095

package/package.json

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

package/src/components/banner/developerBanner.jsx

@@ -1,5 +1,5 @@
 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";
@@ -29,12 +29,27 @@ const DeveloperBanner = ({ findText }) => {
   //   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 +169,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;
+    }
+  }
+`;