l-min-components 1.0.415 → 1.0.422

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.415",
+  "version": "1.0.422",
   "type": "module",
   "files": [
     "src/assets",
@@ -29,6 +29,7 @@
     "react-color": "^2.19.3",
     "react-cookie": "^4.1.1",
     "react-datepicker": "^4.10.0",
+    "react-debounce-input": "^3.3.0",
     "react-dom": "^18.2.0",
     "react-flags-select": "^2.2.3",
     "react-icons": "^4.8.0",

package/src/components/header/assets/svg/search.jsx

@@ -22,3 +22,18 @@ export const SearchIcon = ({ width, height, fill }) => (
     />
   </svg>
 );
+
+
+export const InputSearchIcon = ({ width, height, fill }) => (
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <g clip-path="url(#clip0_15174_273132)">
+    <path d="M8.33333 14.1667C11.555 14.1667 14.1667 11.555 14.1667 8.33333C14.1667 5.11167 11.555 2.5 8.33333 2.5C5.11167 2.5 2.5 5.11167 2.5 8.33333C2.5 11.555 5.11167 14.1667 8.33333 14.1667Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M17.5 17.5L12.5 12.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_15174_273132">
+      <rect width="20" height="20" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>
+);

package/src/components/header/index.jsx

@@ -23,6 +23,7 @@ import useHeader from "./getHeaderDetails";
 import { OutletContext } from "..";
 import { useLocation } from "react-router-dom";
 import usFlag from "../../assets/images/usFlag.png";
+import LanguageDropdown from "./languageDropdown";
 /**
  * @param {{
  *  type: string,
@@ -297,11 +298,10 @@ const HeaderComponent = (props) => {
             <ArrowDownIcon />
           </div>
           {languageDropdown && (
-            <ul className="dropdown_list" ref={containerRef}>
-              <li onClick={() => setLanguageDropdown()}>
-                <img src={usFlag} alt="" /> <span>English</span>
-              </li>
-            </ul>
+            <LanguageDropdown
+              languageDropdown={languageDropdown}
+              setLanguageDropdown={setLanguageDropdown}
+            />
           )}
         </div>
 

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

@@ -51,7 +51,7 @@ export const NavGroup = styled.div`
       box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
       left: 50%;
       transform: translateX(-50%);
-      
+
       li {
         list-style-type: none;
         display: flex;
@@ -642,3 +642,85 @@ export const CountryFlagGroup2 = styled.div`
     }
   }
 `;
+
+export const LanguageDropdownContainer = styled.div`
+  width: 392px;
+  background-color: rgba(255, 255, 255, 1);
+  padding: 20px 20px 0;
+  font-family: "Nunito";
+  position: absolute;
+  z-index: 555;
+  right: 0;
+  min-height: 350px;
+  border-radius: 12px;
+  border: 1px solid #00c2c2;
+  background: #fff;
+  top: 65px;
+
+  .ldc_header {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid#D9D9D9;
+    padding: 0 0 8px;
+
+    .ldc_title {
+      color: #adb2b2;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: normal;
+      letter-spacing: 0.32px;
+    }
+
+    span {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .ldc_search {
+    padding: 10px 0;
+    margin: 8px 0;
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    border-radius: 12px;
+    background: #f6f6f6;
+    height: 34px;
+
+    span {
+      display: flex;
+    }
+
+    .search_input {
+      border: none;
+      background-color: transparent;
+      outline: none;
+      margin-left: 8px;
+      width: 100%;
+      color: #adb2b2;
+      font-size: 14px;
+      font-weight: 400;
+      letter-spacing: 0.28px;
+    }
+  }
+
+  .language_dropdown_list {
+    max-height: 200px;
+    overflow-y: scroll;
+    padding-bottom: 10px;
+
+    .language_dropdown_item {
+      color: #313333;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: normal;
+      letter-spacing: 0.32px;
+      margin: 16px 0;
+      display: flex;
+      align-items: center;
+      span {
+        margin-left: 8px;
+      }
+    }
+  }
+`;

package/src/components/header/languageDropdown.jsx

@@ -4,22 +4,44 @@ import useHeader from "./getHeaderDetails";
 import { OutletContext } from "..";
 import { useLocation } from "react-router-dom";
 import usFlag from "../../assets/images/usFlag.png";
+import { LanguageDropdownContainer } from "./index.styled";
+import { RiCloseCircleFill } from "react-icons/ri";
+import { HiSearch } from "react-icons/hi";
+import { InputSearchIcon } from "./assets/svg/search";
+import { DebounceInput } from "react-debounce-input";
+
 /**
  * @param {{
  *  type: string,
  *  text: string,
  *  onClick: Function,
  *  style: CSSProperties,
- * }} props - properties of Header Component
+ * }} props - properties of Language dropdown Component
  *
  */
-const LanguageDropdown = (props) => {
-  const [languageDropdown, setLanguageDropdown] = useState();
-  const { pathname } = useLocation();
+const LanguageDropdown = ({ languageDropdown, setLanguageDropdown }) => {
   const { setGeneralData, generalData } = useContext(OutletContext);
-
+  const [filteredData, setFilteredData] = useState([]);
+  const [isSearch, setIsSearch] = useState(false);
   const containerRef = useRef(null);
 
+  const sampleSuggestions = ["English", "Spanish"];
+
+  const handleFilter = (event) => {
+    const searchWord = event.target.value;
+    const newFilter = sampleSuggestions.filter((item) => {
+      return item?.toLowerCase().includes(searchWord.toLowerCase());
+    });
+    console.log("newFilter", newFilter);
+    if (searchWord === "") {
+      setFilteredData([]);
+      setIsSearch(false);
+    } else {
+      setFilteredData(newFilter);
+      setIsSearch(true);
+    }
+  };
+
   // logic for closing language dropdown when clicking outside
   useEffect(() => {
     const handleClickOutside = (event) => {
@@ -39,13 +61,60 @@ const LanguageDropdown = (props) => {
   }, [setLanguageDropdown]);
 
   return (
-    <>
-      <ul className="dropdown_list" ref={containerRef}>
-        <li onClick={() => setLanguageDropdown()}>
-          <img src={usFlag} alt="" /> <span>English</span>
-        </li>
-      </ul>
-    </>
+    <LanguageDropdownContainer ref={containerRef}>
+      <div className="ldc_header">
+        <p className="ldc_title"> Whats your language</p>
+        <span onClick={() => setLanguageDropdown(false)}>
+          <RiCloseCircleFill />
+        </span>
+      </div>
+
+      <div className="ldc_search">
+        <span>
+          <InputSearchIcon />
+        </span>
+
+        <DebounceInput
+          type="text"
+          debounceTimeout={500}
+          onChange={handleFilter}
+          className="search_input"
+          name=""
+          id=""
+          placeholder="Search"
+        />
+      </div>
+
+      <div className="language_dropdown_list">
+        {isSearch &&
+          filteredData.length > 0 &&
+          filteredData?.map((item, index) => (
+            <p
+              className="language_dropdown_item"
+              onClick={() => setLanguageDropdown()}
+            >
+              <img src={usFlag} alt="" /> <span>{item}</span>
+            </p>
+          ))}
+
+        {!isSearch && (
+          <>
+            <p
+              className="language_dropdown_item"
+              onClick={() => setLanguageDropdown()}
+            >
+              <img src={usFlag} alt="" /> <span>English</span>
+            </p>
+            <p
+              className="language_dropdown_item"
+              onClick={() => setLanguageDropdown()}
+            >
+              <img src={usFlag} alt="" /> <span>English</span>
+            </p>
+          </>
+        )}
+      </div>
+    </LanguageDropdownContainer>
   );
 };
 

package/src/components/videoPlayer/index.jsx

@@ -1,5 +1,5 @@
-import { useState, useRef } from "react";
 import React from "react";
+import { useState, useRef } from "react";
 import screenfull from "screenfull";
 import {
   RangeContainer,