l-min-components 1.0.150 → 1.0.156

package/package.json

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

package/src/components/course/courseList/index.jsx

@@ -1,15 +1,26 @@
-import React from "react";
+import React, { Fragment, useState } from "react";
 import CourseCard from "../coursecard";
 import { CourseListWrapper } from "./styles";
-
 import PropTypes from "prop-types";
 
+const CourseList = ({ courses, onCourseSelect }) => {
+  const [selectedCourseId, setSelectedCourseId] = useState(null);
+
+  const handleCourseSelect = (courseId) => {
+    setSelectedCourseId(courseId);
+    console.log(selectedCourseId);
+    // onCourseSelect(courseId);
+  };
 
-const CourseList = ({courses}) => {
   return (
     <CourseListWrapper>
       {courses.map((course) => (
-        <CourseCard key={course.id} course={course} />
+        <div className="card" key={course.id} onClick={() => handleCourseSelect(course.id)}>
+          <CourseCard
+            course={course}
+            isSelected={selectedCourseId === course.id}
+          />
+        </div>
       ))}
     </CourseListWrapper>
   );
@@ -25,8 +36,7 @@ CourseList.propTypes = {
       learnersCount: PropTypes.number.isRequired,
     })
   ).isRequired,
+  onCourseSelect: PropTypes.func.isRequired,
 };
 
 export default CourseList;
-
-

package/src/components/course/courseList/styles/index.jsx

@@ -3,8 +3,31 @@ import styled from "styled-components";
 export const CourseListWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
+  gap: 20px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  height: 60%;
   max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
+  margin: 20px auto;
+ 
+
+  
+  /* Style the scrollbar */
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #888;
+    border-radius: 4px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: #f2f2f2;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #555;
+  }
+
 `;

package/src/components/course/coursecard/index.jsx

@@ -19,11 +19,11 @@ const formatLearnersCount = (count) => {
 };
 
 
-const CourseCard = ({ course }) => {
+const CourseCard = ({ course, isSelected }) => {
   const { id, title, endDate, rating, learnersCount } = course;
 
   return (
-    <CardWrapper to={`/courses/${id}`}>
+    <CardWrapper selected={isSelected}>
       <Title>{title}</Title>
       <EndDate>
         <span>Course Ends: </span>

package/src/components/course/coursecard/styles/index.jsx

@@ -2,25 +2,25 @@ import styled from "styled-components";
 import { BsStarFill } from "react-icons/bs";
 import { NavLink } from "react-router-dom";
 
-export const CardWrapper = styled(NavLink)`
-text-decoration: none;
-color: #333;
+export const CardWrapper = styled.div`
+  text-decoration: none;
+  color: #333;
   width: 280px;
   height: auto;
   gap: 20px;
- 
-  border: 5px solid #ffffff;
+  border: ${({selected}) => selected ? "5px solid #FEF1CB" : "1px solid #DFE6E6"};
   background: #fff;
-  border-radius: 25px;
+  border-radius: 29.3674px;
   padding: 30px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   transition: 0.3s ease-in-out;
   cursor: pointer;
+  
 
   &:hover {
-    border: 5px solid #f5d508;
+    border: 5px solid #FEF1CB;
   }
 `;
 

package/src/components/dropdown component/index.jsx

@@ -15,6 +15,7 @@ import {
  * className: string,
  * onSelect: Function,
  * inputPlaceHolder: string,
+ * default: {name:  string | number, [key: string]: string | number}
  * }} props - properties of the dropdown component
  */
 // dropdownData - Array of objects with property values of name and value
@@ -26,7 +27,7 @@ import {
 
 const DropDownComponent = (props) => {
   // select state that dictates the current value.
-  const [selected, setSelected] = useState();
+  const [selected, setSelected] = useState(props.default);
 
   // dropdown state that dictates if dropdown is dropped or not.
   const [dropdown, setDropdown] = useState();
@@ -65,8 +66,7 @@ const DropDownComponent = (props) => {
                     onClick={() => {
                       setSelected(dropdownItem);
                       setDropdown();
-                    }}
-                  >
+                    }}>
                     <span>{dropdownItem?.name}</span>
                     {selected === dropdownItem && <Tick />}
                   </DropDownItem>
@@ -83,8 +83,7 @@ const DropDownComponent = (props) => {
                   onClick={() => {
                     setSelected(dropdownItem);
                     setDropdown();
-                  }}
-                >
+                  }}>
                   <span>{dropdownItem?.name}</span>
                   {selected === dropdownItem && <Tick />}
                 </DropDownItem>
@@ -106,8 +105,7 @@ export const DownIcon = ({ width, height, fill, onClick }) => {
       viewBox="0 0 14 8"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      onClick={onClick}
-    >
+      onClick={onClick}>
       <path
         d="M1 1L7 7L13 1"
         stroke={fill || "#18191B"}
@@ -125,8 +123,7 @@ export const Tick = ({ size, stroke }) => {
       height={size || "16"}
       viewBox="0 0 16 16"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+      xmlns="http://www.w3.org/2000/svg">
       <path
         d="M12.3828 4.23828L5.82031 11.7383L3.00781 8.92578"
         stroke={stroke || "white"}

package/src/components/searchBar/index.jsx

@@ -52,6 +52,7 @@ const SearchBar = ({
       heightSize={restProps.heightSize}
       widthSize={restProps.widthSize}
       borderRadius={restProps.borderRadius}
+      border={restProps.border}
       outlineColor={restProps.outlineColor}
       >
         <SearchIcon  
@@ -66,6 +67,7 @@ const SearchBar = ({
           onChange={handleInputChange}
           onKeyPress={handleEnterPress}
           borderRadius={restProps.borderRadius || "12px"}
+          border={restProps.border || "1px solid #DFE6E6"}
           heightSize={restProps.heightSize || "50px"}
           widthSize={restProps.widthSize || "100%"}
         />
@@ -95,6 +97,7 @@ SearchBar.propTypes = {
   heightSize:PropTypes.string,
   widthSize: PropTypes.string,
   borderRadius: PropTypes.string,
+  border: PropTypes.string,
   outlineColor: PropTypes.string,
 };
 

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

@@ -15,7 +15,7 @@ export const SearchBarContainer = styled.div`
   position: relative;
   height: ${({ heightSize }) => heightSize || "50px"};
   width: ${({ widthSize }) => widthSize || "100%"};
-  
+  border: ${({ border}) => border || "1px solid #DFE6E6"};
   border-radius: ${({ borderRadius }) => borderRadius || "12px"};
   background-color: #FFFFFF;
   transition: box-shadow 0.2s ease;

package/src/components/successCard/index.jsx

@@ -13,13 +13,13 @@ import ButtonComponent from "../button";
 const SuccessCard = (props) => {
   return (
     <Card style={props.style}>
-      <img src={avatar} alt="Partying Face" />
+      <img src={props.image || avatar } alt="Partying Face" />
       <h1>{props.title} </h1>
       <h2>{props.subtitle} </h2>
       <h6> {props.info} </h6>
 
       <ButtonComponent
-        text="Proceed to Dashboard"
+        text={props.text}
         styles={{ marginLeft: "auto", marginRight: "auto" }}
         onClick={props.onClick}
       />