l-min-components 1.0.370 → 1.0.377

package/package.json

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

package/src/components/AppMainLayout/index.jsx

@@ -20,6 +20,7 @@ import {
   SideMenu,
 } from "../";
 import { leftNavMenu, user, sideMenuOptions } from "../../hooks/leftNavMenu";
+import InstructorAccountSwitcher from "../instructorAccountSwitcher";
 // import SideMenu from "../sideBar/sideMenu";
 
 const AppMainLayout = () => {
@@ -121,6 +122,9 @@ const AppMainLayout = () => {
             )}
           </LeftLayout>
           <CenterLayout isOpen={isOpen} style={centerLayoutStyle}>
+            {window.location.pathname.includes("instructor") && (
+              <InstructorAccountSwitcher />
+            )}  
             <Outlet />
           </CenterLayout>
 

package/src/components/fileRightBar/assets/lession.jsx

@@ -0,0 +1,11 @@
+const LessonIcon = () => {
+    return(
+        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13.2047 10.3862V3.3902C13.2047 2.69466 12.6367 2.1788 11.9469 2.23676H11.9121C10.6949 2.34109 8.84595 2.96128 7.81423 3.61046L7.7157 3.67421C7.54761 3.77855 7.26939 3.77855 7.1013 3.67421L6.9564 3.58727C5.92467 2.94389 4.08148 2.3295 2.86428 2.23096C2.17454 2.173 1.6123 2.69466 1.6123 3.3844V10.3862C1.6123 10.9426 2.06441 11.4643 2.62084 11.5339L2.78893 11.557C4.04671 11.7251 5.98843 12.3627 7.1013 12.9713L7.12448 12.9829C7.28098 13.0698 7.53022 13.0698 7.68092 12.9829C8.79379 12.3685 10.7413 11.7251 12.0049 11.557L12.1962 11.5339C12.7526 11.4643 13.2047 10.9426 13.2047 10.3862Z" stroke="white" stroke-width="1.00467" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M7.4082 3.86523V12.5595" stroke="white" stroke-width="1.00467" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M4.94477 5.60352H3.64062" stroke="white" stroke-width="1.00467" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M5.37948 7.34375H3.64062" stroke="white" stroke-width="1.00467" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+    )
+}
+export default LessonIcon

package/src/components/fileRightBar/assets/lessonflag.jsx

@@ -0,0 +1,11 @@
+const LessonFlag = () => {
+    return(
+        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5.51758 5.92969C6.5493 6.30644 7.67376 6.30644 8.70548 5.92969" stroke="white" stroke-width="0.772826" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M9.90592 1.84375H4.31839C3.0838 1.84375 2.08105 2.85229 2.08105 4.08108V12.2479C2.08105 13.2912 2.82876 13.7317 3.74456 13.2275L6.5731 11.6567C6.87451 11.4886 7.36139 11.4886 7.65699 11.6567L10.4855 13.2275C11.4013 13.7375 12.149 13.297 12.149 12.2479V4.08108C12.1432 2.85229 11.1405 1.84375 9.90592 1.84375Z" stroke="white" stroke-width="1.15924" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M9.90592 1.84375H4.31839C3.0838 1.84375 2.08105 2.85229 2.08105 4.08108V12.2479C2.08105 13.2912 2.82876 13.7317 3.74456 13.2275L6.5731 11.6567C6.87451 11.4886 7.36139 11.4886 7.65699 11.6567L10.4855 13.2275C11.4013 13.7375 12.149 13.297 12.149 12.2479V4.08108C12.1432 2.85229 11.1405 1.84375 9.90592 1.84375Z" stroke="white" stroke-width="0.772826" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+    )
+}
+
+export default LessonFlag;

package/src/components/fileRightBar/assets/slider.jsx

@@ -0,0 +1,13 @@
+const SliderIcon = () => {
+    return(
+        <svg width="53" height="5" viewBox="0 0 53 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="0.871094" y="0.384766" width="19.3206" height="3.86413" rx="1.93206" fill="#00C2C2"/>
+            <rect x="23.2832" y="0.384766" width="7.72826" height="3.86413" rx="1.93206" fill="#DFE6E6"/>
+            <rect x="34.1025" y="0.384766" width="7.72826" height="3.86413" rx="1.93206" fill="#DFE6E6"/>
+            <rect x="44.9219" y="0.384766" width="7.72826" height="3.86413" rx="1.93206" fill="#DFE6E6"/>
+        </svg>
+    )
+}
+
+export default SliderIcon;
+

package/src/components/fileRightBar/components/ugradeLock.jsx

@@ -11,6 +11,7 @@ const UpgradeComponent = () => {
   return (
     
     <Upgrade>
+      <div className="container">
        <img src={UpgradeIcon} alt="upgrad lock" />
        <p>
          Upgrade to <span>ENTERPRISE</span> for more features.
@@ -21,12 +22,15 @@ const UpgradeComponent = () => {
         styles={{
           marginTop: "12px",
           fontSize: "16px",
-          width: "200px",
+          width: "171px",
           height: "38.641px",
           gap: "8px",
           padding: "15.457px 30.913px",
         }}
       />
+
+      </div>
+       
     </Upgrade>
   );
 };

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

@@ -0,0 +1,101 @@
+import React from "react";
+import {
+  BannerWrapper,
+  InstructorContainer,
+  NewLanguage,
+  RecentAdded,
+  Container,
+  Upgrade,
+  Users,
+  UploadProgressContainer
+} from "../styles";
+import Button from "../../button";
+import CircularProgressBar from "../components/progressBar";
+import UpgradeIcon from "../assets/Feature.png";
+import { UploadProgress } from "../assets/uploadProgressIcon";
+import ProgressBar from "../../progressBar";
+import UpgradeComponent from "./upgrade";
+import LessonIcon from "../assets/lession";
+import LessonFlag from "../assets/lessonflag";
+import Ellipse from "../assets/Ellipse.png";
+import Ellipse2 from "../assets/Ellipse2.png";
+import Ellipse3 from "../assets/Ellipse3.png";
+import Ellipse4 from "../assets/Ellipse4.png";
+import SliderIcon from "../assets/slider";
+
+/**
+ * @param {{
+*  CourseClick: function,
+*  UpgradeClick: function,
+* }} props - properties of graph Component
+*
+*/
+
+const EnterpriseRightBar = ({UpgradeClick, CourseClick}) => {
+
+  return (
+    <InstructorContainer>   
+    <BannerWrapper>
+      <div className="head_instructor head_enterprise">
+        <h3>Best Course</h3>
+      </div>
+      <NewLanguage>
+        <div className="top_section">
+          <div className="lession_cont">
+            <LessonIcon />
+            <p> 9 lessions</p>
+          </div>
+          <div className="flag_cont">
+            <LessonFlag />
+
+          </div>
+        </div>
+
+        <div className="buttom_section">
+          <p>French for Beginners</p>
+        </div>
+      </NewLanguage>
+      <SliderIcon />
+    </BannerWrapper>
+    <RecentAdded>
+      <div className="top_area">
+        <h5>Recently added</h5>
+        <p>See all</p>
+      </div>
+      <div className="users_list">
+      <div className="user">
+       <img src={Ellipse} alt="user" />
+      </div>
+      <div className="user">
+        <img src={Ellipse2} alt="user" />
+      </div>
+      <div className="user">
+        <img src={Ellipse3} alt="user" />
+      </div>
+      <div className="user">
+        <img src={Ellipse4} alt="user" />
+      </div>
+      </div>
+      <Button
+        type="primary"
+        text="Create Course"
+        styles={{
+          marginTop: "29px",
+          fontSize: "16px",
+          width: "203px",
+          gap: "8px",
+          padding: "20px 6px", 
+          height: "40px",
+          boxShadow: "0px 10px 20px 0px rgba(254, 191, 16, 0.25)", 
+        }}
+        onClick={CourseClick}
+      />
+    </RecentAdded>
+    
+    <UpgradeComponent UpgradeClick={UpgradeClick} />
+    
+  </InstructorContainer>
+  );
+};
+
+export default EnterpriseRightBar;

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

@@ -0,0 +1,43 @@
+import React from "react";
+import {
+  Upgrade,
+} from "../styles";
+import Button from "../../button";
+import UpgradeIcon from "../assets/Feature.png";
+import EnterpriseUpgrade from "../assets/enterpriseUpgrade.png"
+
+
+const UpgradeComponent = ({UpgradeClick}) => {
+
+  return (
+    
+    <Upgrade>
+      <div className="container">
+       <img src={EnterpriseUpgrade} alt="upgrad box" />
+       <div className="upgrade_text">
+          <p>You are running out of slot?</p>
+       </div>
+       <p className="reminder">
+         45 slots remaining out of 50 slots for bronze package
+       </p>
+       <Button
+        type="primary"
+        text="Upgrade"
+        styles={{
+          marginTop: "12px",
+          fontSize: "16px",
+          width: "171px",
+          height: "38.641px",
+          gap: "8px",
+          padding: "15.457px 30.913px",
+        }}
+        onClick={UpgradeClick}
+      />
+
+      </div>
+       
+    </Upgrade>
+  );
+};
+
+export default UpgradeComponent;

package/src/components/fileRightBar/instructorRightBar.jsx

@@ -0,0 +1,101 @@
+import React from "react";
+import {
+  BannerWrapper,
+  InstructorContainer,
+  NewLanguage,
+  RecentAdded,
+  Container,
+  Upgrade,
+  Users,
+  UploadProgressContainer
+} from "./styles";
+import Button from "../button";
+import CircularProgressBar from "./components/progressBar";
+import UpgradeIcon from "./assets/Feature.png";
+import { UploadProgress } from "./assets/uploadProgressIcon";
+import ProgressBar from "../progressBar";
+import UpgradeComponent from "./components/ugradeLock";
+import LessonIcon from "./assets/lession";
+import LessonFlag from "./assets/lessonflag";
+import Ellipse from "./assets/Ellipse.png";
+import Ellipse2 from "./assets/Ellipse2.png";
+import Ellipse3 from "./assets/Ellipse3.png";
+import Ellipse4 from "./assets/Ellipse4.png";
+import SliderIcon from "./assets/slider";
+
+
+/**
+ * @param {{
+*  onClick: function,
+* }} props - properties of graph Component
+*
+*/
+
+const InstructorRightBar = (props) => {
+
+  return (
+    <InstructorContainer>   
+    <BannerWrapper>
+      <div className="head_instructor">
+        <h3>Learn a new language today</h3>
+      </div>
+      <NewLanguage>
+        <div className="top_section">
+          <div className="lession_cont">
+            <LessonIcon />
+            <p> 9 lessions</p>
+          </div>
+          <div className="flag_cont">
+            <LessonFlag />
+
+          </div>
+        </div>
+
+        <div className="buttom_section">
+          <p>French for Beginners</p>
+        </div>
+      </NewLanguage>
+      <SliderIcon />
+      <Button
+        type="primary"
+        text="Create Personal Account"
+        styles={{
+          marginTop: "29px",
+          fontSize: "16px",
+          width: "203px",
+          gap: "8px",
+          padding: "20px 6px", 
+          height: "40px",
+          boxShadow: "0px 10px 20px 0px rgba(254, 191, 16, 0.25)", 
+        }}
+        onClick={props.onClick}
+      />
+    </BannerWrapper>
+    <RecentAdded>
+      <div className="top_area">
+        <h5>Recently added</h5>
+        <p>See all</p>
+      </div>
+      <div className="users_list">
+      <div className="user">
+       <img src={Ellipse} alt="user" />
+      </div>
+      <div className="user">
+        <img src={Ellipse2} alt="user" />
+      </div>
+      <div className="user">
+        <img src={Ellipse3} alt="user" />
+      </div>
+      <div className="user">
+        <img src={Ellipse4} alt="user" />
+      </div>
+      </div>
+
+    </RecentAdded>
+    <UpgradeComponent />
+    
+  </InstructorContainer>
+  );
+};
+
+export default InstructorRightBar;

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

@@ -1,6 +1,21 @@
 import styled from "styled-components";
 import { FaArrowRight } from "react-icons/fa";
 import BannerImg from "../assets/Vector19.png"
+import InstructorBanner from "../assets/newLanguage.png";
+import UpgradeIcon from "../assets/Feature.png";
+
+
+export const InstructorContainer = styled.div`
+  background: #fff;
+  max-width: 232px;
+  display: flex;
+  /* align-items: center; */
+  text-align: center;
+  flex-direction: column;
+  padding: 10px 0px;
+  border-radius: 30px;
+
+`;
 
 export const Container = styled.div`
   background-color: transparent;
@@ -39,6 +54,40 @@ export const BannerWrapper = styled.div`
   margin-bottom: 20px;
   width: 100%;
 
+  .head_instructor{
+    width: 100%;
+    h3{
+      color: var(--Neutral-90, #313333);
+      font-family: Nunito;
+      font-size: 13.911px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 15.457px; /* 111.111% */
+      letter-spacing: 0.278px;
+    }
+  }
+
+  .head_enterprise{
+    text-align: left;
+    color: var(--Neutral-90, #313333);
+    font-family: Nunito;
+    font-size: 13.911px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 15.457px; /* 111.111% */
+    letter-spacing: 0.278px;
+
+    h3{
+      color: var(--Neutral-90, #313333);
+      font-family: Nunito;
+      font-size: 13.911px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 15.457px; /* 111.111% */
+      letter-spacing: 0.278px;
+    }
+  }
+
   .head{
     display: flex;
     align-items: center;
@@ -126,17 +175,61 @@ export const AbsoluteSVG = styled.svg`
 
 
 export const Upgrade = styled.div`
-  background-color: #fff;
+padding: 10px;
+margin-top: 20px;
+
+.container{
+  /* background-color: #fff; */
+  border-radius: 23.185px; 
+  background: var(--Neutral-10, #F5F7F7);
   width: 100%;
    max-width: 232px;
-  border-radius: 36px;
-  padding: 30px 16px 21px;
-  overflow: hidden;
- border-radius: 30px;
+  padding: 10px 0px;
+ /* border-radius: 30px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
+ margin-top: 20px;
+
+ img{
+   object-fit: cover;
+    margin-top: -27%;
+ }
+
+ .upgrade_text{
+  background: rgba(0,194,194,0.1);
+  border-radius: 5px;
+  padding: 5px;
+  height: 32px; 
+  width: 100%; 
+  margin-bottom: 10px;
+  margin-top: -10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  p{
+    color: var(--Neutral-90, #313333);
+    text-align: center;
+    font-family: Nunito;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    width: 100%;
+
+  }
+ }
+
+ .reminder{
+  color: var(--Neutral-70, #636666);
+  text-align: center;
+  font-family: Nunito;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  width: 100%;
+ }
 
  p{
   color: var(--neutral-80, #4A4D4D);
@@ -149,7 +242,7 @@ export const Upgrade = styled.div`
   letter-spacing: 0.773px;
   width: 70%;
   text-align: center;
-  margin-top: 10px;
+  margin-top: 0px;
 
   span{
     color: var(--primary-color-main, #FEBF10);
@@ -161,7 +254,7 @@ export const Upgrade = styled.div`
     letter-spacing: 0.773px;
   }
  }
-
+}
 `;
 
 export const Users = styled.div`
@@ -290,4 +383,140 @@ export const UploadProgressContainer = styled.div`
     }
   }
 
-`
+`
+
+export const NewLanguage = styled.div`
+  background-image: url(${InstructorBanner});
+  background-size: cover; 
+  background-repeat: no-repeat;
+  margin-top: 10px;
+  width: 100%;
+  height: 126.743px;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  gap: 60px;
+  padding: 10px;
+  margin-bottom: 10px;
+  
+  .top_section{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+
+    .lession_cont{
+      display: flex;
+      align-items: center;
+      border-radius: 6.183px;
+      background: rgba(12, 13, 13, 0.1);
+      padding: 3px;
+
+      p{
+        color: var(--white, #FFF);
+        font-family: Nunito;
+        font-size: 10.82px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 17.002px; /* 157.143% */
+        letter-spacing: 0.216px;
+      }
+
+      svg{
+        margin-right: 4px;;
+      }
+    }
+
+    .flag_cont{
+      border-radius: 6.183px;
+      background: rgba(12, 13, 13, 0.1);
+      padding: 3px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .buttom_section{
+    display: flex;
+    justify-content: start;
+
+    p{
+      color: var(--white, #FFF); 
+      font-family: Nunito;
+      font-size: 14.911px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 10.82px; /* 77.778% */
+      letter-spacing: 0.278px;
+    }
+  }
+`
+
+export const RecentAdded = styled.div`
+display: flex;
+flex-direction: column;
+padding: 10px 20px;
+margin-top: -30px;
+    .top_area{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+
+      h5{
+        color: var(--Neutral-90, #313333);
+        font-family: Nunito;
+        font-size: 13.911px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 15.457px; /* 111.111% */
+        letter-spacing: 0.278px;
+      }
+
+      p{
+        color: var(--Primary-color-main, #FEBF10);
+        font-family: Nunito;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 15.457px; /* 128.804% */
+        letter-spacing: 0.24px;
+      }
+    }
+    .users_list {
+  display: flex;
+  gap: 12px;
+}
+
+.user {
+  position: relative; /* Make the parent container relative */
+  width: 40px;
+  height: 40px;
+}
+
+.user::before {
+  content: "";
+  position: absolute;
+  width: 8px;
+  height: 8px; 
+  background-color: #30D468;
+  border-radius: 50%; 
+  bottom: 0;
+  right: 0;
+}
+
+.user:nth-child(2)::before {
+  background-color: #F39B33;
+}
+
+.user:nth-child(3)::before {
+  background-color: #30D468; 
+}
+
+.user:nth-child(4)::before {
+  background-color: #C6CCCC;
+}
+
+
+`;

package/src/components/index.js

@@ -32,3 +32,4 @@ export { default as DatePickerCalender } from "./datePicker";
 export { default as TextEditor } from "./textEditor";
 export { default as MessageAddon } from "./messageAddon/messages";
 export { default as InstructorAccountSwitcher } from "./instructorAccountSwitcher";
+export { default as InstructorRightBar } from "./fileRightBar/instructorRightBar"

package/src/components/messageAddon/messages/index.styled.js

@@ -9,6 +9,7 @@ export const MessagesWrapper = styled.div`
   right: 0;
   border-radius: 30px;
   background-color: rgba(0, 194, 194, 1);
+  z-index: 99;
 
   .message_by_wrapper {
     border-radius: ${({ isFullHeight }) =>