l-min-components 1.0.357 → 1.0.366

package/package.json

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

package/src/assets/svg/arrowDown.jsx

@@ -0,0 +1,16 @@
+const ArrowDown = ({ width, height, fill }) => (
+  <svg
+    width={width || "30"}
+    height={height || "30"}
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M25.6094 10.5813L15.0031 21.1875L4.39688 10.5813L6.16438 8.8125L15.0031 17.6525L23.8419 8.8125L25.6094 10.5813Z"
+      fill={fill || "#F5F7F7"}
+    />
+  </svg>
+);
+
+export default ArrowDown;

package/src/assets/svg/closeIcon.jsx

@@ -0,0 +1,28 @@
+const CloseIcon = ({ onClick }) => {
+  return (
+    <svg
+      width="35"
+      height="34"
+      viewBox="0 0 35 34"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      onClick={onClick}
+    >
+      <path
+        d="M13.0547 12.7266L21.54 21.2118"
+        stroke="#0C0D0D"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.0538 21.2118L21.5391 12.7266"
+        stroke="#0C0D0D"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+export default CloseIcon;

package/src/assets/svg/intructorIcon.jsx

@@ -0,0 +1,26 @@
+const InstructorIcon = () => {
+  return (
+    <svg
+      width="30"
+      height="23"
+      viewBox="0 0 30 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.4688 8.20365C7.4688 8.35583 7.31077 8.43192 7.21127 8.54313C7.16444 8.58995 7.17615 8.57239 7.14103 8.63093C7.08835 8.71872 6.98885 8.85919 6.98885 8.96455C6.98885 9.07576 7.04153 9.09332 7.10006 9.21038C7.17615 9.36841 7.13518 9.32744 7.25809 9.45035L9.83344 12.0784C9.83929 12.0842 9.851 12.0901 9.85685 12.0959L11.3552 13.6353C11.3786 13.6646 11.4196 13.6997 11.4547 13.7348L12.6722 14.9581C12.678 14.9639 12.6839 14.9698 12.6897 14.9756L13.0995 15.2507C13.1697 15.2976 13.1229 15.321 13.2282 15.321C14.0301 15.321 14.0476 15.4146 14.7207 14.8527L15.1831 14.4372C15.189 14.4313 15.1948 14.4196 15.2007 14.4138L16.1138 13.5241C16.7927 12.851 16.6288 13.0851 16.6288 14.5601C16.6288 15.9473 16.4708 17.0886 16.4708 18.4816C16.4708 19.1899 16.424 19.7693 16.4298 20.4775C16.4298 21.0219 16.3069 21.7301 16.3069 22.5202C16.3069 22.6256 16.3538 22.608 16.4064 22.7017L16.4767 22.8305C16.5469 22.9241 16.6406 23.0002 16.7869 23.0002H25.385C25.6309 23.0002 25.824 22.7251 25.8591 22.5144C25.9177 22.1632 25.7421 20.0737 25.666 19.7576C25.4377 19.7576 25.3909 19.7166 25.2563 19.8337L25.1392 19.9566C25.1158 19.98 25.1099 19.9859 25.0807 20.0151C25.0631 20.0385 25.0397 20.0561 25.0221 20.0737L24.829 20.2434C24.3315 20.7351 23.9744 20.22 23.635 19.8688L18.9876 15.122C18.6072 14.7006 19.2218 14.3084 19.6373 13.8928L21.3581 12.213C21.4342 12.1369 21.481 12.0901 21.5571 12.014L22.002 11.575C22.0605 11.5223 22.0605 11.5223 22.1073 11.4814L22.4468 11.1419C22.6868 10.8961 23.0087 10.8317 23.2662 11.1185C23.3072 11.1653 23.3013 11.1653 23.3599 11.2238L25.1451 13.0441C25.2211 13.1202 25.2797 13.167 25.3733 13.2548C25.5431 13.4246 25.6543 13.5299 25.7889 13.7231C25.6192 13.8109 25.5255 13.9514 25.3733 14.0684C25.3675 14.0743 25.3616 14.0801 25.3499 14.086L25.3089 14.1211C25.3031 14.127 25.2914 14.1328 25.2855 14.1387C25.2797 14.1445 25.2738 14.1562 25.268 14.1621L24.6475 14.7006C24.6358 14.7064 24.63 14.7123 24.6241 14.7181C24.6183 14.724 24.6066 14.7298 24.6007 14.7357L24.0564 15.2273C24.0505 15.2332 24.0388 15.239 24.033 15.2449C24.0271 15.2507 24.0154 15.2566 24.0096 15.2624L23.7169 15.5317C23.7111 15.5375 23.6993 15.5434 23.6935 15.5492L23.3774 15.8302C23.155 16.0409 23.1082 16.1346 23.1082 16.4389C23.1082 16.5852 23.196 16.6613 23.2721 16.755L23.3891 16.8779C23.4418 16.9364 23.4535 16.9598 23.5238 17.0242L24.7178 18.306C25.1802 18.6397 25.3499 18.4875 25.8708 18.0075L27.738 16.3511C27.7438 16.3453 27.7497 16.3394 27.7555 16.3336L28.692 15.5083C28.6979 15.5024 28.7096 15.4907 28.7154 15.4849C28.7798 15.4322 28.8091 15.3971 28.8793 15.3327C28.891 15.321 28.9378 15.28 28.9437 15.2742L29.5992 14.4957C29.7865 14.1972 29.7807 13.6411 29.6812 13.3017C29.6109 13.0675 29.1837 12.5525 29.0081 12.3359L28.1769 11.4462C28.1711 11.4404 28.1652 11.4345 28.1594 11.4287L26.4737 9.59668C26.462 9.59083 26.4386 9.56156 26.4327 9.55571C26.4269 9.54986 26.421 9.53815 26.4152 9.5323L26.3801 9.48547C26.3742 9.47962 26.3683 9.47377 26.3625 9.46206C26.1459 9.19867 25.6074 8.5841 25.3148 8.43192L25.1099 8.31486C25.0221 8.26218 24.9636 8.24462 24.829 8.24462H17.3078C17.1498 8.24462 17.1029 8.26803 16.9976 8.33242C16.6932 8.52557 16.4884 8.65434 16.225 8.91772C16.2074 8.93528 16.184 8.95284 16.1606 8.97626C16.1547 8.98211 16.1489 8.99381 16.143 8.99381L16.0318 9.08746C16.026 9.09332 16.0201 9.09917 16.0084 9.10502C15.9382 9.16941 15.9909 9.12258 15.9499 9.16355L15.2651 9.83666C15.2592 9.84251 15.2475 9.84836 15.2417 9.85421L15.0836 10.0181C14.6739 10.3868 14.3052 10.779 13.8838 11.136C13.7257 11.2707 13.8194 11.2414 13.5501 11.2414C13.5209 11.136 13.474 11.1243 13.398 11.0365C13.3687 11.0014 13.357 10.978 13.3219 10.9487L10.846 8.42607C10.5826 8.13927 9.41787 6.92183 9.27155 6.92183C8.9028 6.92183 8.87939 6.92183 8.58088 7.19692L8.53991 7.23204C8.53406 7.2379 8.52235 7.24375 8.5165 7.2496C8.51065 7.25546 8.5048 7.26716 8.49894 7.27301C8.29994 7.46617 8.3175 7.35496 8.27067 7.55981L7.00641 6.30726C6.96544 6.26629 6.983 6.28385 6.94203 6.24873L5.79483 5.03714C5.78897 5.03129 5.78312 5.02544 5.77727 5.01958L5.42023 4.65084C5.33243 4.56305 5.29146 4.52207 5.20952 4.42257L4.44862 3.6207C4.4018 3.56802 4.38424 3.55632 4.33156 3.50364C4.24962 3.4217 4.18523 3.35731 4.10914 3.28122L3.66431 2.80713C3.65846 2.80127 3.65261 2.79542 3.64675 2.78957C3.61749 2.75445 3.61163 2.7486 3.58822 2.72518L3.2546 2.37985C3.20192 2.32718 3.19021 2.30962 3.13754 2.25694L2.99706 2.11646C2.99121 2.11061 2.9795 2.10476 2.97365 2.09891L2.64588 1.74772C2.60491 1.70675 2.62247 1.72431 2.58735 1.68919L1.94351 1.01024C1.69768 0.764407 1.2587 0.138129 0.878253 0.530285C0.81387 0.594668 0.731927 0.77026 0.726074 0.84635C0.708514 1.07462 0.884106 1.22095 1.01873 1.37898C1.02458 1.38483 1.03043 1.39068 1.03629 1.39654L1.0714 1.44336C1.07726 1.44922 1.08311 1.46092 1.08896 1.46677C1.09482 1.47263 1.10067 1.47848 1.10652 1.48433C1.12994 1.5136 1.12994 1.51945 1.16505 1.54872L3.51798 3.9953C3.52384 4.00115 3.52969 4.01286 3.53554 4.01871L5.30902 5.88584C5.3617 5.93852 5.36755 5.95022 5.42608 6.00875L5.8358 6.43603C5.84165 6.44188 5.8475 6.45359 5.85336 6.45944L6.81911 7.45446C6.97715 7.61249 7.4688 8.05147 7.4688 8.20365Z"
+        fill="#F95454"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.4661 4.12155C17.4661 5.6492 17.5129 4.72441 17.63 5.5614C17.6475 5.70773 17.8172 6.05891 17.8933 6.17597C18.0104 6.34571 17.8933 6.26962 18.0631 6.48619L18.9644 7.42268C19.1049 7.53974 19.4912 7.77386 19.6785 7.83239C19.8834 7.89092 19.8366 7.91433 19.9829 7.96701C20.1116 8.01384 20.2112 7.98457 20.3633 8.02554C20.8491 8.14846 20.9603 8.20699 21.5047 8.11919C21.6978 8.08993 21.6744 8.05481 21.8442 8.01384C22.008 7.97872 22.0841 8.01384 22.2246 7.9553L23.3484 7.32317C23.7523 7.02467 24.0039 6.65592 24.2381 6.25206C24.2439 6.24621 24.2498 6.2345 24.2556 6.22865L24.5249 5.6609C24.5424 5.56725 24.5366 5.52043 24.5541 5.44434C24.5892 5.2746 24.6244 5.35069 24.6712 5.12242C24.7414 4.75368 24.7473 3.99863 24.5951 3.67086C24.5073 3.48356 24.5717 3.52454 24.5249 3.34309C24.4839 3.18506 24.4371 3.1792 24.3844 3.04458C24.2381 2.68169 24.3317 2.92752 24.1795 2.64658L24.1503 2.59975C23.9805 2.3071 23.8225 2.14321 23.5942 1.91494C23.5884 1.90909 23.5767 1.90324 23.5708 1.89738C23.2664 1.58717 22.9211 1.37646 22.5348 1.21258C22.3826 1.14234 22.4587 1.11893 22.2597 1.08381C21.7973 1.00772 21.9729 0.919922 21.5866 0.919922C19.6434 0.919922 20.6677 0.978453 19.9478 1.08381C19.7605 1.10722 19.3508 1.33549 19.1635 1.45255C19.1517 1.4584 19.1459 1.46426 19.1342 1.47011L18.7011 1.79203C18.4084 2.032 18.0338 2.54707 17.8465 2.89826C17.7587 3.05629 17.8231 3.04458 17.706 3.23774C17.6826 3.27285 17.7002 3.22018 17.6592 3.30797C17.5948 3.46015 17.6417 3.58892 17.5539 3.80548C17.5012 3.9284 17.4661 3.9401 17.4661 4.12155Z"
+        fill="#F95454"
+      />
+    </svg>
+  );
+};
+
+export default InstructorIcon;

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

@@ -4,12 +4,26 @@ import { CourseListWrapper } from "./styles";
 import PropTypes from "prop-types";
 
 const CourseList = ({ courses, onCourseSelect }) => {
-  const [selectedCourseId, setSelectedCourseId] = useState(null);
+  // const [selectedCourseId, setSelectedCourseId] = useState(null);
+  const [selectedCourseIds, setSelectedCourseIds] = useState([]);
+
+  // const handleCourseSelect = (courseId) => {
+  //   setSelectedCourseId(courseId);
+  //   console.log(selectedCourseId);
+  //   // onCourseSelect(courseId);
+  // };
 
   const handleCourseSelect = (courseId) => {
-    setSelectedCourseId(courseId);
-    console.log(selectedCourseId);
-    // onCourseSelect(courseId);
+    if (selectedCourseIds.includes(courseId)) {
+      setSelectedCourseIds((prevSelected) => 
+        prevSelected.filter((id) => id !== courseId)
+      );
+    } else {
+      // Otherwise, add the course ID to the array
+      setSelectedCourseIds((prevSelected) => [...prevSelected, courseId]);
+    }
+    console.log(selectedCourseIds);
+    // onCourseSelect(courseId); // Adapt this callback for multiple selections if necessary
   };
 
   return (
@@ -18,7 +32,7 @@ const CourseList = ({ courses, onCourseSelect }) => {
         <div className="card" key={course.id} onClick={() => handleCourseSelect(course.id)}>
           <CourseCard
             course={course}
-            isSelected={selectedCourseId === course.id}
+            isSelected={selectedCourseIds.includes(course.id)}
           />
         </div>
       ))}

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

@@ -4,8 +4,8 @@ export const CourseListWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
-  overflow-y: scroll;
-  overflow-x: hidden;
+  /* overflow-y: auto;
+  overflow-x: hidden; */
   height: 60%;
   max-width: 1200px;
   margin: 20px auto;

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

@@ -8,22 +8,27 @@ export const CardWrapper = styled.div`
   width: 280px;
   height: auto;
   gap: 20px;
-  border: ${({selected}) => selected ? "5px solid #FEF1CB" : "1px solid #DFE6E6"};
+  border: 1px solid #DFE6E6; 
   background: #fff;
-  border-radius: 29.3674px;
+  border-radius: 30px; 
   padding: 30px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  transition: 0.3s ease-in-out;
   cursor: pointer;
+  transition: all 0.2s ease-in-out;
   
+  /* These properties will handle the border without making the card expand. */
+  margin: ${({ selected }) => selected ? "-4px" : "0"};
+  border-width: ${({ selected }) => selected ? "5px" : "1px"};
+  border-color: ${({ selected }) => selected ? "#FEF1CB" : "#DFE6E6"};
 
   &:hover {
-    border: 5px solid #FEF1CB;
+    border-color: #FEF1CB;
   }
 `;
 
+
 export const Title = styled.h3`
   font-size: 16px;
   font-weight: 800;

package/src/components/instructorAccountSwitcher/brands-logo/index.jsx

@@ -0,0 +1,5 @@
+import figma from "./figma.png";
+import frankUniversity from "./frank-university.png";
+import linkedin from "./linkedin.png";
+
+export { figma, frankUniversity, linkedin };

package/src/components/instructorAccountSwitcher/components/expiry modal/index.jsx

@@ -0,0 +1,132 @@
+import styled from "styled-components";
+import shield from "../../../../assets/images/warning-shield.png";
+import ButtonComponent from "./../../../button";
+import CloseIcon from "../../../../assets/svg/closeIcon";
+import InstructorIcon from "../../../../assets/svg/intructorIcon";
+
+const ExpiryModal = ({ close, btnText, children, onClick }) => {
+  return (
+    <Container>
+      <Wrapper>
+        <span onClick={close}>
+          <CloseIcon />
+        </span>
+        <Content>
+          <SideHero>
+            <img src={shield} alt="" />
+          </SideHero>
+          <Details>
+            <Box>
+              <InstructorIcon />
+              <p>Instructor</p>
+            </Box>
+            <Children>{children}</Children>
+            <ButtonComponent text={btnText} onClick={onClick} />
+          </Details>
+        </Content>
+      </Wrapper>
+    </Container>
+  );
+};
+
+export default ExpiryModal;
+
+const Container = styled.div`
+  display: grid;
+  place-items: center;
+  position: fixed;
+  z-index: 9999;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.15);
+`;
+
+const Wrapper = styled.div`
+  width: 748px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 12px;
+  span {
+    display: inline-flex;
+    width: 40px;
+    height: 40px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    cursor: pointer;
+    background: #fff;
+  }
+`;
+
+const Content = styled.div`
+  width: 100%;
+  height: 438px;
+  background-color: #fff;
+  border-radius: 30px;
+  display: flex;
+`;
+
+const SideHero = styled.div`
+  flex: 1;
+  max-width: 305px;
+  display: grid;
+  place-items: center;
+  background: rgba(249, 84, 84, 0.1);
+`;
+
+const Details = styled.div`
+  padding: 40px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  button {
+    width: 100%;
+    font-size: 14px;
+    height: 52px;
+    box-shadow: 0px 10px 20px 0px rgba(254, 191, 16, 0.25);
+  }
+`;
+
+const Box = styled.div`
+  border-radius: 15px;
+  background: #f5f7f7;
+  width: 81px;
+  height: 81px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  svg {
+    display: inline-block;
+    margin-right: 10px;
+  }
+  p {
+    color: #f95454;
+    font-size: 12px;
+    font-weight: 600;
+  }
+`;
+
+const Children = styled.div`
+  width: 100%;
+  .title {
+    font-size: 22px;
+    font-weight: 700;
+  }
+  .danger {
+    color: #f95454;
+  }
+  .desc,
+  .sub_title {
+    font-size: 16px;
+
+    line-height: 20px;
+  }
+  .desc {
+    font-weight: 600;
+  }
+  .sub_title {
+    font-weight: 700;
+  }
+`;

package/src/components/instructorAccountSwitcher/components/renew modal/index.jsx

@@ -0,0 +1,120 @@
+import styled from "styled-components";
+import CloseIcon from "../../../../assets/svg/closeIcon";
+import Button from "../../../button";
+import oops from "../../../../assets/images/oops.png";
+
+const RenewModal = ({
+  img,
+  close,
+  titleText,
+  titleColor,
+  btn1Text,
+  btn2Text,
+  btn1onClick,
+  btn2onClick,
+  message,
+}) => {
+  return (
+    <Container>
+      <Wrapper>
+        <span onClick={close}>
+          <CloseIcon />
+        </span>
+        <Content>
+          <img src={img || oops} alt="" />
+          <h2
+            style={{
+              color: titleColor || "#00C2C2",
+            }}
+          >
+            {titleText || "Oops!"}
+          </h2>
+          <p>{message}</p>
+          <BtnGroup>
+            <Button
+              type="secondary"
+              text={btn1Text || "Select Plans"}
+              onClick={btn1onClick}
+            />
+            <Button
+              text={btn2Text || "Renew Subscription"}
+              onClick={btn2onClick}
+            />
+          </BtnGroup>
+        </Content>
+      </Wrapper>
+    </Container>
+  );
+};
+
+export default RenewModal;
+
+const Container = styled.div`
+  display: grid;
+  place-items: center;
+  position: fixed;
+  z-index: 9999;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.15);
+`;
+
+const Wrapper = styled.div`
+  width: 820px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 12px;
+  span {
+    display: inline-flex;
+    width: 40px;
+    height: 40px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    cursor: pointer;
+    background: #fff;
+  }
+`;
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 45px 26px;
+  width: 100%;
+  min-height: 464px;
+  background-color: #fff;
+  border-radius: 30px;
+  display: flex;
+  img {
+    width: 125px;
+    height: 125px;
+    object-fit: contain;
+  }
+  h2 {
+    margin-top: 13px;
+    margin-bottom: 15px;
+    font-size: 40px;
+    font-weight: 700;
+  }
+  p {
+    max-width: 754px;
+    font-size: 24px;
+    text-align: center;
+    font-weight: 500;
+    line-height: 35px; /* 36.336px */
+  }
+`;
+
+const BtnGroup = styled.div`
+  display: flex;
+  gap: 20px;
+  margin-top: auto;
+
+  button {
+    height: 52px;
+    min-width: 168px;
+    padding: 0 20px;
+    font-size: 14px;
+    box-shadow: 0px 10px 20px 0px rgba(254, 191, 16, 0.25);
+  }
+`;

package/src/components/instructorAccountSwitcher/index.jsx

@@ -0,0 +1,300 @@
+import { useEffect, useState } from "react";
+import styled from "styled-components";
+import ExpiryModal from "./components/expiry modal";
+import Search from "../searchBar";
+import { figma, frankUniversity, linkedin } from "./brands-logo";
+import ArrowDown from "../../assets/svg/arrowDown";
+import RenewModal from "./components/renew modal";
+
+const InstructorAccountSwitcher = ({ setAccountType }) => {
+  const [expiryFlow, setExpiryFlow] = useState();
+  const [switchValue, setSwitchValue] = useState(null);
+  const [selectedValue, setSelectedValue] = useState({
+    name: "Figma Learning",
+    count: 0,
+    image: figma,
+  });
+
+  const [dropdown, setDropdown] = useState(false);
+  const dataDropdown = [
+    { name: "Figma Learning", count: 0, image: figma },
+    { name: "Linkedin Learning", count: 3, image: linkedin },
+    { name: "Frank University", count: 0, image: frankUniversity },
+  ];
+
+  const handleSwitch = (value) => {
+    if (value === 2) {
+      setSwitchValue("affiliates");
+      localStorage.setItem("affiliates", true);
+    } else {
+      setSwitchValue("instructor");
+      localStorage.removeItem("affiliates");
+    }
+  };
+  useEffect(() => {
+    const value = JSON.stringify(localStorage.getItem("affiliates"));
+    if (value) {
+      setSwitchValue("affiliates");
+    } else {
+      setSwitchValue("instructor");
+    }
+  }, []);
+
+  useEffect(() => {
+    const value = JSON.stringify(localStorage.getItem("affiliates"));
+    if (value) {
+      setAccountType && setAccountType(switchValue);
+    } else {
+      setAccountType && setAccountType(switchValue);
+    }
+  }, [switchValue]);
+
+  return (
+    <>
+      {expiryFlow === "renew" && (
+        <RenewModal
+          close={() => setExpiryFlow(null)}
+          message="Oops, you have to renew your Instructor plan to continue to
+            dashboard."
+        />
+      )}
+      {expiryFlow === "expiry" && (
+        <ExpiryModal
+          btnText="Renew Subscription"
+          close={() => setExpiryFlow("renew")}
+        >
+          <ExpiryModalContent>
+            <p className="title danger">
+              Your subscription to Learngual Premium has expired
+            </p>
+            <p className="desc">
+              Your students will no longer be able to access your courses after
+            </p>
+            <p className="sub_title danger">47h - 22m - 59s</p>
+          </ExpiryModalContent>
+        </ExpiryModal>
+      )}
+      <Container>
+        <div className="left">
+          {switchValue !== "affiliates" && (
+            <p onClick={() => setExpiryFlow("expiry")}>Frank Language Expert</p>
+          )}
+          {switchValue === "affiliates" && (
+            <AffiliatesDropDown>
+              <div className="selected" onClick={() => setDropdown(!dropdown)}>
+                <div>
+                  <img src={selectedValue.image} alt="" />
+                  <p>{selectedValue.name}</p>
+                </div>
+                <ArrowDown />
+              </div>
+
+              {dropdown && switchValue === "affiliates" ? (
+                <AffiliatesDropDownWrapper>
+                  <div className="search_wrapper">
+                    <Search placeholder="Search Affiliates" />
+                  </div>
+                  <ul>
+                    {dataDropdown?.map((item, idx) => (
+                      <li
+                        key={idx}
+                        onClick={() => {
+                          setSelectedValue(item);
+                          setDropdown(false);
+                        }}
+                      >
+                        <div className="left" key={idx}>
+                          <img src={item.image} alt="" />
+                          <p>{item.name}</p>
+                        </div>
+                        {item.count ? <span>{item.count}</span> : null}
+                      </li>
+                    ))}
+                  </ul>
+                </AffiliatesDropDownWrapper>
+              ) : null}
+            </AffiliatesDropDown>
+          )}
+        </div>
+        <div className="btn__wrapper">
+          <button
+            className={switchValue !== "affiliates" ? "active" : ""}
+            onClick={() => handleSwitch(1)}
+          >
+            <span>My Account</span>
+            <span className="circle"></span>
+          </button>
+          <button
+            className={switchValue === "affiliates" ? "active" : ""}
+            onClick={() => handleSwitch(2)}
+          >
+            <span>Affiliates</span>
+            <span className="circle"></span>
+          </button>
+        </div>
+      </Container>
+    </>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 24px;
+  width: 100%;
+  background: #ffffff;
+  border-radius: 25px;
+  height: 60px;
+
+  .left {
+    > p {
+      cursor: pointer;
+    }
+    p {
+      font-size: 20px;
+      font-weight: 600;
+      color: #00c2c2;
+    }
+  }
+
+  .btn__wrapper {
+    background: #dfe6e6;
+    border-radius: 10px;
+    overflow: hidden;
+    display: flex;
+    button {
+      font-size: 14px;
+      line-height: 30px;
+      font-weight: 700;
+      padding: 4px 15px;
+      color: #4a4d4d;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      height: 40px;
+      span {
+        color: #4a4d4d;
+      }
+      .circle {
+        width: 8px;
+        height: 8px;
+        display: inline-block;
+        background-color: #febf10;
+        border-radius: 50%;
+      }
+      &.active {
+        background: #00c2c2;
+
+        border-radius: 10px;
+        span {
+          color: white;
+        }
+      }
+    }
+  }
+`;
+
+const AffiliatesDropDown = styled.div`
+  position: relative;
+  .selected {
+    display: flex;
+    align-items: center;
+    gap: 25px;
+    cursor: pointer;
+    svg {
+      width: 24px;
+      height: 24px;
+      path {
+        fill: #7c8080;
+      }
+    }
+
+    > div {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      img {
+        width: 36px;
+        height: 36px;
+      }
+      p {
+        color: #00c2c2;
+        font-size: 20px;
+        font-weight: 600;
+      }
+    }
+  }
+`;
+
+const AffiliatesDropDownWrapper = styled.div`
+  position: absolute;
+  left: 40px;
+  border-radius: 15px;
+  border: 1px solid #c6cccc;
+  background: #fff;
+  box-shadow: 0px 10px 20px 0px rgba(139, 139, 139, 0.25);
+  width: 351px;
+  z-index: 69;
+  padding: 20px;
+  ul {
+    list-style: none;
+    li {
+      height: 50px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      border-top: 1px solid #f5f7f7;
+      border-bottom: 1px solid #f5f7f7;
+      cursor: pointer;
+
+      &:first-child {
+        border-top: none;
+      }
+      &:last-child {
+        border-bottom: none;
+      }
+
+      > .left {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex: 1;
+        p {
+          color: #4a4d4d;
+          font-size: 14px;
+          font-weight: 600;
+        }
+      }
+      span {
+        border-radius: 17px;
+        background: #00c2c2;
+        min-width: 26px;
+        height: 26px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 700;
+        padding: 0 10px;
+      }
+    }
+  }
+`;
+
+const ExpiryModalContent = styled.div`
+  padding-bottom: 30px;
+  > .title {
+    margin-bottom: 25px;
+  }
+  > .desc {
+    margin: 10px;
+  }
+`;
+
+export default InstructorAccountSwitcher;