l-min-components 0.2.0

package/src/components/ApiProgress/ApiProgressBar/index.jsx

@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import {
+  Container,
+  HandleValue,
+  MaxValue,
+  MinValue,
+  ProgressBarAvailable,
+  ProgressBarContainer,
+  ProgressBarTotal,
+  ProgressBarUsed,
+  ProgressHandle,
+} from "./styles";
+
+const defaultSize = "md";
+
+const ProgressBar = ({
+  total,
+  used,
+  available,
+  max,
+  size,
+  disabled,
+  onAdjust,
+}) => {
+  const [handlePosition, setHandlePosition] = useState((used / max) * 100);
+
+  const handleAdjust = (e) => {
+    if (!disabled) {
+      const containerWidth = e.currentTarget.offsetWidth;
+      const newPosition = Math.min(
+        100,
+        Math.max(
+          0,
+          ((e.clientX - e.currentTarget.getBoundingClientRect().left) /
+            containerWidth) *
+            100
+        )
+      );
+      setHandlePosition(newPosition);
+      const newUsed = Math.floor((newPosition / 100) * max);
+      onAdjust(newUsed);
+    }
+  };
+
+  const usedWidth = (used / total) * 100;
+  const availableWidth = (available / max) * 100;
+
+  return (
+    <Container disabled={disabled}>
+      <ProgressBarContainer
+        onClick={handleAdjust}
+        disabled={disabled}
+        size={size}
+      >
+        <ProgressBarTotal
+          color="#FEBF10"
+          width={100}
+          left={0}
+          disabled={disabled}
+        />
+        <ProgressBarUsed
+          color="#30D568"
+          width={usedWidth}
+          left={0}
+          disabled={disabled}
+        />
+        <ProgressBarAvailable
+          color="#00C2C2"
+          width={availableWidth}
+          left={0}
+          disabled={disabled}
+        />
+        <ProgressHandle left={handlePosition} disabled={disabled}>
+          <HandleValue disabled={disabled}>{used}</HandleValue>
+        </ProgressHandle>
+        <MinValue disabled={disabled}>{0}</MinValue>
+        <MaxValue disabled={disabled}>{max}</MaxValue>
+      </ProgressBarContainer>
+    </Container>
+  );
+};
+
+ProgressBar.propTypes = {
+  total: PropTypes.number,
+  used: PropTypes.number,
+  available: PropTypes.number,
+  max: PropTypes.number,
+  size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl"]),
+  disabled: PropTypes.bool,
+  onAdjust: PropTypes.func,
+};
+
+ProgressBar.defaultProps = {
+  size: defaultSize,
+  disabled: false,
+};
+
+export default ProgressBar;

package/src/components/ApiProgress/ApiProgressBar/styles/index.jsx

@@ -0,0 +1,122 @@
+import styled from "styled-components";
+
+export const sizes = {
+  xs: {
+    height: "8px",
+    borderRadius: "4px",
+  },
+  sm: {
+    height: "12px",
+    borderRadius: "6px",
+  },
+  md: {
+    height: "16px",
+    borderRadius: "8px",
+  },
+  lg: {
+    height: "24px",
+    borderRadius: "12px",
+  },
+  xl: {
+    height: "32px",
+    borderRadius: "16px",
+  },
+};
+
+export const Container = styled.div`
+  width: 100%;
+  padding: 32px 37px 48px;
+  border-radius: 22px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: ${(props) =>
+    props.disabled ? "transparent" : "rgba(0, 194, 194, 0.06)"};
+  border: 0.552705px solid
+    ${(props) => (props.disabled ? "#fff" : "#00C2C2")};
+  position: relative;
+
+  .switch {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+  }
+`;
+export const ProgressBarContainer = styled.div`
+  position: relative;
+  width: 100%;
+  height: ${(props) => sizes[props.size].height};
+  border-radius: ${(props) => sizes[props.size].borderRadius};
+`;
+
+export const ProgressBarTotal = styled.div`
+  position: absolute;
+  height: 100%;
+  border-radius: 10px;
+  background-color: ${(props) => (props.disabled ? "rgba(255, 255, 255, 0.069)" : props.color)};
+  left: ${(props) => props.left}%;
+  width: ${(props) => props.width}%;
+  z-index: 1;
+`;
+
+export const ProgressBarUsed = styled(ProgressBarTotal)`
+  background-color: ${(props) => (props.disabled ? "#ffffff" : props.color)};
+  z-index: 2;
+`;
+
+export const ProgressBarAvailable = styled(ProgressBarTotal)`
+  background-color: ${(props) =>
+    props.disabled ? "rgba(255, 255, 255, 0.069)" : props.color};
+  left: ${(props) => props.left}%;
+  width: ${(props) => props.width}%;
+  z-index: 1;
+`;
+
+export const ProgressHandle = styled.div`
+  position: absolute;
+  top: 50%;
+  left: ${(props) => props.left - "0.5"}%;
+  ${(props) =>
+    props.disabled
+      ? ``
+      : `
+   width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: white;
+  border: 2px solid rgba(0, 194, 194, 1);
+  `}
+
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+  display: flex;
+  /* visibility: ${(props) => (props.disabled ? "hidden" : "visible")}; */
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 3;
+`;
+
+export const HandleValue = styled.div`
+  position: absolute;
+  bottom: -30px;
+  font-size: 12px;
+  color: ${(props) => (props.disabled ? "#ffffff" : props.color)};
+`;
+
+export const MinValue = styled.span`
+  position: absolute;
+  left: 0;
+  bottom: -30px;
+  font-size: 12px;
+  color: ${(props) => (props.disabled ? "#ffffff" : props.color)};
+`;
+
+export const MaxValue = styled.span`
+  position: absolute;
+  right: 0;
+  bottom: -30px;
+  font-size: 12px;
+  color: ${(props) => (props.disabled ? "#ffffff" : props.color)};
+`;

package/src/components/ApiProgress/toggle/index.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import {
+  SwitchContainer,
+  SwitchInput,
+  SwitchLabel,
+  SwitchSlider,
+} from "./styles";
+
+const Switch = ({ defaultChecked, color, icon, onChange }) => {
+  const [checked, setChecked] = useState(defaultChecked);
+
+  const handleChange = (e) => {
+    setChecked(e.target.checked);
+    onChange && onChange(e);
+  };
+
+  return (
+    <SwitchContainer>
+      <SwitchLabel>
+        <SwitchInput
+          type="checkbox"
+          checked={checked}
+          color={color}
+          onChange={handleChange}
+        />
+        <SwitchSlider color={color}>
+          <div className="icon">{icon}</div>
+        </SwitchSlider>
+      </SwitchLabel>
+    </SwitchContainer>
+  );
+};
+
+export default Switch;

package/src/components/ApiProgress/toggle/styles/index.jsx

@@ -0,0 +1,72 @@
+import styled from "styled-components";
+
+export const SwitchContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const SwitchLabel = styled.label`
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 24px;
+`;
+
+export const SwitchSlider = styled.span`
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: ${({ color }) => color};
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 34px;
+
+  .icon {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    right: 4px;
+    bottom: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #dfe5e5;
+
+    color: transparent;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 50%;
+  }
+`;
+
+export const SwitchInput = styled.input`
+  opacity: 0;
+  width: 0;
+  height: 0;
+
+  &:not(:checked) + ${SwitchSlider} {
+    /* background-color: rgb(198, 204, 204); */
+
+    color: ${({ color }) => color};
+    .icon {
+      color: ${({ color }) => color};
+
+      background-color: #fff;
+    }
+  }
+  &:checked + ${SwitchSlider} {
+    background-color: ${({ color }) => (color ? "rgb(198, 204, 204)" : color)};
+  }
+
+  &:focus + ${SwitchSlider} {
+    box-shadow: 0 0 1px rgba(198, 204, 204, 0.3);
+  }
+
+  &:checked + ${SwitchSlider} .icon {
+    transform: translateX(-26px);
+  }
+`;

package/src/components/AppMainLayout/index.jsx

@@ -0,0 +1,50 @@
+import { useState, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import {
+  Layout,
+  CenterLayout,
+  LeftLayout,
+  RightLayout,
+  MainLayout,
+} from "./index.styled";
+import HeaderComponent from "../header";
+import Banner from "../banner";
+import SideBar from "../sideNav";
+import { leftNavMenu, user, sideMenuOptions } from "../../hooks/leftNavMenu";
+import SideMenu from "../sideBar/sideMenu";
+
+const AppMainLayout = (props) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const location = useLocation();
+
+  console.log(location);
+
+  useEffect(() => {
+    if (location.pathname === "/documentation") setIsOpen(false);
+  }, [isOpen]);
+
+  return (
+    <Layout>
+      <HeaderComponent />
+      <MainLayout>
+        <LeftLayout>
+          <SideBar routes={leftNavMenu} />
+          <SideMenu
+            user={user}
+            routes={sideMenuOptions}
+            userType={"developer"}
+            isOpen={isOpen}
+            setIsOpen={setIsOpen}
+          />
+        </LeftLayout>
+        <CenterLayout>{props.children}</CenterLayout>
+
+        <RightLayout>
+          <Banner />
+        </RightLayout>
+      </MainLayout>
+    </Layout>
+  );
+};
+
+export default AppMainLayout;

package/src/components/AppMainLayout/index.styled.js

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+
+/* styles for main layout component */
+export const Layout = styled.div`
+  background-color: #e5e5e5;
+  min-height: 100vh;
+  width: 100%;
+`;
+
+export const MainLayout = styled.div`
+  background-color: #e5e5e5;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 84px 20px 20px 0;
+`;
+
+export const LeftLayout = styled.div`
+  background-color: transparent;
+  /* width: 100%;
+  max-width: 350px; */
+`;
+
+export const CenterLayout = styled.div`
+  width: 100%;
+  /* max-width: 900px; */
+  margin: 0 20px;
+`;
+
+export const RightLayout = styled.div`
+  width: 100%;
+  max-width: 232px;
+
+  > div {
+    width: 100%;
+  }
+`;

package/src/components/Arrow.jsx

@@ -0,0 +1,24 @@
+const Arrow = () => {
+  return (
+    <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M14.4301 5.93005L20.5001 12.0001L14.4301 18.0701"
+        stroke="#F5F7F7"
+        stroke-width="1.5"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M3.5 12H20.33"
+        stroke="#F5F7F7"
+        stroke-width="1.5"
+        stroke-miterlimit="10"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default Arrow;

package/src/components/apiBar/bar.jsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+
+const Bar = () => {
+  const [width, setWidth] = useState(50); // initial width of the bar is 50%
+  
+  const handleClick = (e) => {
+    const { width: barWidth, left } = e.currentTarget.getBoundingClientRect();
+    const newWidth = Math.floor((e.clientX - left) / barWidth * 100);
+    setWidth(newWidth);
+  }
+  
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: 30,
+        backgroundColor: 'lightgray',
+        position: 'relative'
+      }}
+      onClick={handleClick}
+    >
+      <div
+        style={{
+          width: `${width}%`,
+          height: '100%',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          backgroundColor: 'red'
+        }}
+      />
+      <div
+        style={{
+          width: `${100 - width}%`,
+          height: '100%',
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          backgroundColor: 'blue'
+        }}
+      />
+    </div>
+  );
+};
+
+export default Bar;

package/src/components/apiBar/index.jsx

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+
+const ProgressBarContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const ProgressBarInput = styled.input`
+  width: 100%;
+`;
+
+const ProgressBarFill = styled.div`
+  width: ${(props) => props.progress}%;
+  height: 30px;
+  border-radius: 5px;
+  background-color: ${(props) => props.color};
+  transition: width 0.5s ease-in-out;
+`;
+
+const ProgressBar = ({ initialProgress = 50 }) => {
+  const [progress, setProgress] = useState(initialProgress);
+  const [color, setColor] = useState("#6ab04c");
+
+  useEffect(() => {
+    if (progress < 30) {
+      setColor("#ff0000"); // Red
+    } else if (progress < 70) {
+      setColor("#ffa500"); // Orange
+    } else {
+      setColor("#6ab04c"); // Green
+    }
+  }, [progress]);
+
+  const handleSlide = (event) => {
+    const newProgress = Number(event.target.value);
+    setProgress(newProgress);
+  };
+
+  return (
+    <ProgressBarContainer>
+      <ProgressBarInput
+        type="range"
+        min="0"
+        max="100"
+        value={progress}
+        onChange={handleSlide}
+      />
+      <ProgressBarFill progress={progress} color={color} />
+    </ProgressBarContainer>
+  );
+};
+
+export default ProgressBar;

package/src/components/authentication/index.styled.js

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+
+/* styles for authentication main layout component */
+export const Layout = styled.div`
+  /* background-color: #e5e5e5; */
+  display: flex;
+  justify-content: space-between;
+  min-height: calc(100vh - 89.5px);
+  padding-top: 88px;
+`;
+
+export const LeftLayout = styled.div`
+  background-color: transparent;
+  width: 40%;
+
+  background-image: url("../../assets/images/sign_up.png") !important;
+  background-position: center center !important;
+  background-repeat: no-repeat !important;
+  background-size: cover !important;
+
+  & img {
+    width: 100%;
+  }
+`;
+
+export const RightLayout = styled.div`
+  background-color: rgba(255, 255, 255, 1);
+  width: 60%;
+  border-radius: 20px;
+  padding: 35px;
+  margin: 25px 35px;
+`;

package/src/components/authentication/mainLayout.jsx

@@ -0,0 +1,14 @@
+import { Layout, LeftLayout, RightLayout } from "./index.styled";
+
+const MainLayout = (props) => {
+  return (
+    <Layout>
+      <LeftLayout>
+        <img src={props.img} alt="authentication image" />
+      </LeftLayout>
+      <RightLayout>{props.children}</RightLayout>
+    </Layout>
+  );
+};
+
+export default MainLayout;

package/src/components/banner/index.jsx

@@ -0,0 +1,41 @@
+import {
+  AbsoluteSVG,
+  ArrowIcon,
+  BannerCTA,
+  BannerImage,
+  BannerSubtitle,
+  BannerTitle,
+  BannerWrapper,
+} from "./styles";
+import BannerImg from "./assets/banner.png";
+import Button from "../button";
+import { FaArrowRight } from "react-icons/fa";
+
+const Banner = () => {
+  return (
+    <BannerWrapper>
+      <BannerTitle>Learn Languages, anytime, anywhere.</BannerTitle>
+      <BannerSubtitle>
+        Join millions of users from all over the world to learn foreign
+        languages
+      </BannerSubtitle>
+      <BannerImage src={BannerImg} alt="Banner" />
+      <Button
+        type="primary"
+        text="Get Started"
+        icon={{
+          jsx: FaArrowRight,
+          right: true,
+        }}
+        styles={{
+          marginTop: "29px",
+          fontSize: "16px",
+          width: "200px",
+          gap: "8px",
+        }}
+      />
+    </BannerWrapper>
+  );
+};
+
+export default Banner;