l-min-components 1.0.160 → 1.0.167

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.160",
+  "version": "1.0.167",
   "type": "module",
   "files": [
     "src/assets",
@@ -12,6 +12,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.4.0",
+    "axios-hooks": "^4.0.0",
     "chart.js": "^4.2.1",
     "classnames": "^2.3.2",
     "moment": "^2.29.4",

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

@@ -48,25 +48,34 @@ const DropDownComponent = (props) => {
           <ControlInput
             placeholder={props?.inputPlaceHolder || "Select Dropdown"}
             type="text"
+            value={selected?.name}
             onChange={(e) => {
               setSearchParam(e.target.value);
             }}
+            onClick={() => setDropdown(true)}
           />
         ) : (
-          <p onClick={() => setDropdown(!dropdown)}>{selected?.name}</p>
+          <p onClick={() => setDropdown(!dropdown)}>
+            {selected?.name || "Select Dropdown"}
+          </p>
         )}
         <DownIcon onClick={() => setDropdown(!dropdown)} />
         {searchParam && dropdown && (
           <DropDownContent>
             {props?.dropdownData?.map((dropdownItem, idx) => {
-              if (props?.dropdownData[idx]?.name?.includes(searchParam))
+              if (
+                props?.dropdownData[idx]?.name
+                  ?.toLowerCase()
+                  .includes(searchParam?.toLowerCase())
+              )
                 return (
                   <DropDownItem
                     key={idx}
                     onClick={() => {
                       setSelected(dropdownItem);
                       setDropdown();
-                    }}>
+                    }}
+                  >
                     <span>{dropdownItem?.name}</span>
                     {selected === dropdownItem && <Tick />}
                   </DropDownItem>
@@ -83,7 +92,8 @@ const DropDownComponent = (props) => {
                   onClick={() => {
                     setSelected(dropdownItem);
                     setDropdown();
-                  }}>
+                  }}
+                >
                   <span>{dropdownItem?.name}</span>
                   {selected === dropdownItem && <Tick />}
                 </DropDownItem>
@@ -105,7 +115,8 @@ 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"}
@@ -123,7 +134,8 @@ 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/dropdown component/styles.js

@@ -42,21 +42,24 @@ export const ControlInput = styled.input`
   outline: none;
   border: none;
   cursor: caret;
+  background: none;
 `;
 
 export const DropDownContent = styled.ul`
   position: absolute;
-  top: 25px;
+  top: 35px;
   left: 0;
   list-style-type: none;
   padding-left: 20px;
   width: 100%;
-  padding: 4px;
+  max-height: 200px;
+  overflow-y: scroll;
+  // padding: 4px 10px;
 `;
 
 export const DropDownItem = styled.li`
   font-family: "Nunito", sans-serif;
-  padding: 4px;
+  padding: 4px 10px;
   font-size: 14px;
   display: flex;
   align-items: center;

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/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"