l-min-components 1.0.164 → 1.0.168

package/package.json

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

package/src/components/errorPage/index.jsx

@@ -0,0 +1,46 @@
+import React, { useContext, useLayoutEffect } from "react";
+import { Container } from "./style";
+import ErrorImage from "./errorPage.png";
+import  ButtonComponent from "../button";
+import { useNavigate } from "react-router-dom";
+
+const Index = () => {
+    // const data = useContext(OutletContext);
+    const navigate = useNavigate()
+
+    // useLayoutEffect(() => {
+    //     data.setRightLayout(false);
+    //     data.setLeftLayout(false)
+    //   }, []);
+
+    return(
+        <Container>
+            <div className="right">
+                <h3>Opss...</h3>
+                <h2>Page not found</h2>
+                <p>Seems we can't find the page your looking for. Let's get you back home.</p>
+                <ButtonComponent
+                    text="Go Back"
+                    styles={{
+                        width: "144px",
+                        height: "50px",
+                        background: "#FEBF10",
+                        fontWeight: 700,
+                        fontSize: "16px",
+                        lineHeight: "22px",
+                        marginTop: "20px",
+                    }}
+                    onClick={() => navigate(-1)}
+                />
+            </div>
+
+            <div className="left">
+               <img src={ErrorImage} alt="" />
+            </div>
+
+        </Container>
+
+    )
+}
+
+export default Index;

package/src/components/errorPage/style.jsx

@@ -0,0 +1,62 @@
+import styled from "styled-components"
+
+
+export const Container = styled.div`
+    display: flex;
+    justify-content: space-between; 
+    align-items: center;
+    background: #fff;
+    padding-left: 5%;
+    margin: -2%;
+    height: 94vh;
+
+    @media only screen and (max-width: 1500px) {
+        margin: -3%;
+        }
+
+    .right{
+        display: grid;
+        grid-gap: 10px;
+
+        
+        h3{
+            font-family: 'Nunito';
+            font-style: normal;
+            font-weight: 800;
+            font-size: 40px;
+            line-height: 65px;
+            color: #313333;
+        }
+        h2{
+            font-family: 'Nunito';
+            font-style: normal;
+            font-weight: 500;
+            font-size: 38px;
+            line-height: 65px;
+            color: #313333;
+        }
+        p{
+            font-family: 'Inter';
+            font-style: normal;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 32px;
+            color: #18191F;
+            // width: 100%;
+        }
+
+        @media only screen and (max-width: 1800px) {
+           
+          }
+    }
+
+    .left{
+        @media only screen and (max-width: 1336px) {
+           img{
+            width: 773px;
+           }
+        }
+    }
+
+`;
+

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

@@ -429,7 +429,8 @@ export const Nav2 = styled.ul`
 export const NavGroup2 = styled.div`
   width: 50%;
   display: flex;
-  justify-content: end;
+  justify-content: flex-end;
+  gap: 70px;
 `;
 
 export const CountryFlagGroup2 = styled.div`
@@ -440,7 +441,7 @@ export const CountryFlagGroup2 = styled.div`
   align-items: center;
   position: relative;
   width: 70px;
-  margin: 0 70px 0 0;
+  margin: 0 0 0 0;
 
   & > svg {
     position: absolute;

package/src/components/header/login-header.jsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, useCallback } from "react";
 import ReactFlagsSelect from "react-flags-select";
 import logo from "./assets/images/logo.png";
 import { Navbar2, NavGroup2, Nav2, CountryFlagGroup2 } from "./index.styled";
 import { ArrowDownIcon } from "./assets/svg/arrow-down";
 import ButtonComponent from "../button";
+import { useLocation, useNavigate } from "react-router-dom";
 
 /**
  * @param {{
@@ -19,12 +20,16 @@ const HeaderComponentTwo = (props) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchResultOpen, setSearchResultOpen] = useState(false);
 
-  console.log(selected);
-
+  const navigate = useNavigate();
+  const location = useLocation();
+  console.log(location);
   useEffect(() => {
     setIsOpen(false);
   }, []);
 
+  const goToLogin = useCallback(() => {
+    navigate("/sign-in");
+  }, []);
   return (
     <Navbar2>
       <img src={logo} alt="Learngual logo" />
@@ -55,7 +60,9 @@ const HeaderComponentTwo = (props) => {
           <ArrowDownIcon />
         </CountryFlagGroup2>
 
-        <ButtonComponent type="secondary" text="Log in" />
+        {location.pathname.includes("sign-in") && (
+          <ButtonComponent type="secondary" text="Log in" onClick={goToLogin} />
+        )}
       </NavGroup2>
     </Navbar2>
   );

package/src/components/index.js

@@ -25,3 +25,4 @@ export { default as SelectDropdownGraph } from "./graph";
 export { default as NotificationThresholdComponent } from "./notificationThreshold";
 export { default as DevAPIdocs } from "./developerAPIdocs";
 export { default as Calender } from "./calender/input";
+export { default as ErrorPage } from "./errorPage";