l-min-components 1.0.1190 → 1.0.1192

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.1190",
+  "version": "1.0.1192",
   "type": "module",
   "files": [
     "src/assets",
@@ -56,6 +56,7 @@
     "react-modal": "^3.16.1",
     "react-multi-carousel": "^2.8.5",
     "react-player": "^2.15.1",
+    "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.8.2",
     "react-slick": "0.30.2",
     "react-toastify": "^9.1.3",

package/src/components/fileRightBar/enterpriseRightBar/index.jsx

@@ -3,9 +3,11 @@ import Button from "../../button";
 import UpgradeComponent from "./upgrade";
 import api from "./api";
 import styled from "styled-components";
-import Carousel from "react-multi-carousel";
-import "react-multi-carousel/lib/styles.css";
+// import Carousel from "react-multi-carousel";
+// import "react-multi-carousel/lib/styles.css";
 import moment from "moment";
+import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
+import { Carousel as ReactCarousl } from "react-responsive-carousel";
 
 const EnterpriseRightBar = ({ planState }) => {
   const {
@@ -22,11 +24,11 @@ const EnterpriseRightBar = ({ planState }) => {
   const courses = coursesData?.data?.results;
   const slotData = remainingSlotData?.data;
 
-  const CustomDots = ({ onClick, active }) => {
+  const CustomDots = ({ onClick, isSelected }) => {
     return (
       <CustomDotsContainer
         onClick={onClick}
-        className={`${active ? "active" : ""}`}
+        className={`${isSelected ? "active" : ""}`}
       ></CustomDotsContainer>
     );
   };
@@ -48,19 +50,28 @@ const EnterpriseRightBar = ({ planState }) => {
       {courses?.length > 0 && courses && (
         <Banner>
           <h3>Courses ending soon</h3>
-          <Carousel
-            responsive={responsive}
-            arrows={false}
-            showDots
-            autoPlaySpeed={1000}
+          <ReactCarousl
+            // responsive={responsive}
+            // arrows={false}
+            // showDots
+            // autoPlaySpeed={1000}
+            // autoPlay
+            // infinite
+            // transitionDuration={2000}
+            // renderDotsOutside
+            // containerClass="carousel-container"
+            // dotListClass="custom-dot-list-style"
+            // defaultActiveIndex={0}
+            // customDot={<CustomDots />}
             autoPlay
-            infinite
-            transitionDuration={2000}
-            renderDotsOutside
-            containerClass="carousel-container"
-            dotListClass="custom-dot-list-style"
-            defaultActiveIndex={0}
-            customDot={<CustomDots />}
+            infiniteLoop
+            showArrows={false}
+            showStatus={false}
+            showThumbs={false}
+            className="carousel-container"
+            renderIndicator={(clickHandler, isSelected) => (
+              <CustomDots onClick={clickHandler} isSelected={isSelected} />
+            )}
           >
             {courses?.map((course) => (
               <Course key={course?.id}>
@@ -74,7 +85,19 @@ const EnterpriseRightBar = ({ planState }) => {
                 </div>
               </Course>
             ))}
-          </Carousel>
+            {courses?.map((course) => (
+              <Course key={course?.id}>
+                <img src={course?.thumbnail_dict?.url} alt="" />
+                <div className="content">
+                  <p className="date">
+                    <span>Ends:</span>{" "}
+                    {moment(course?.end_day).format("MMM DD, YYYY")}
+                  </p>
+                  <p className="name">{course?.name}</p>
+                </div>
+              </Course>
+            ))}
+          </ReactCarousl>
         </Banner>
       )}
       <RecentAddedEnterprie>
@@ -187,17 +210,17 @@ const EnterpriseContainer = styled.div`
   width: 231px;
   padding: 20px 12px;
   .carousel-container {
-    width: 100% !important;
-    height: auto !important;
-  }
-  .custom-dot-list-style {
-    gap: 4px;
-    bottom: 20px;
-  }
-  .more-slot {
-    padding: 0 !important;
-    .container {
-      max-width: none !important;
+    position: relative;
+
+    .control-dots {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      justify-content: center;
+      bottom: 30;
     }
   }
 `;