feat: Add search to language select

client/src/components/CustomSelect/CustomSelect.jsx

@@ -1,8 +1,11 @@
 import React, { useEffect, useState, useRef } from "react";
+import { SUPPORTED_LANGUAGES } from "../../utils/constants";
+
 import styles from "./CustomSelect.module.css";
 
-const CustomSelect = ({ options, onSelect }) => {
+const CustomSelect = ({ onSelect }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const  [options, setOptions] = useState(SUPPORTED_LANGUAGES)
   const [selectedOption, setSelectedOption] = useState(
     options.length > 0 ? options[0] : null,
   );
@@ -24,6 +27,13 @@ const CustomSelect = ({ options, onSelect }) => {
     }
   };
 
+  const handleChange = (e) => {
+    const searchVal = e.target.value;
+    searchVal.length > 0 ?
+      setOptions(SUPPORTED_LANGUAGES.filter(option => option.label.toLowerCase().includes(searchVal.toLowerCase())))
+      : setOptions(SUPPORTED_LANGUAGES)
+  }
+
   useEffect(() => {
     document.addEventListener("mousedown", handleClickOutside);
     return () => {
@@ -45,16 +55,19 @@ const CustomSelect = ({ options, onSelect }) => {
         )}
       </div>
       {isOpen && (
-        <div className={styles.options}>
-          {options.map((option) => (
-            <div
-              key={option.value}
-              className={styles.option}
-              onClick={() => handleOptionClick(option)}
-            >
-              {option.label}
-            </div>
-          ))}
+        <div className={styles.options__container}>
+          <input onChange={handleChange} className={styles.options__search} placeholder="Search..." />
+          <div className={styles.options}>
+            {options.map((option) => (
+              <div
+                key={option.value}
+                className={styles.option}
+                onClick={() => handleOptionClick(option)}
+              >
+                {option.label}
+              </div>
+            ))}
+          </div>
         </div>
       )}
     </div>

client/src/components/CustomSelect/CustomSelect.module.css

@@ -16,27 +16,49 @@
   justify-content: space-between;
 }
 
-.options {
+.options__container {
   position: absolute;
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem 0;
   top: 140%;
   left: 0;
-  height: 400px;
-  overflow-y: auto;
   width: 100%;
+  height: 400px;
   border: none;
   border-radius: 10px;
   background-color: var(--color-yellow);
   z-index: 2;
+  align-items: center;
+}
+
+.options__search {
+  margin-top: 0.5rem;
+  padding: 6px;
+  width: 85%;
+  border: none;
+  border-radius: 6px;
+  background-color: #d79921;
+  color: var(--color-dark);
+  &:focus {
+    outline: none;
+  }
+}
+
+.options {
+  width: 100%;
+  height: 400px;
+  overflow-y: auto;
 }
 
 .option {
   padding: 10px;
   color: var(--color-dark);
-  border-bottom: var(--color-dark) 1px solid;
+  border-bottom: 1px solid var(--color-dark);
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: transform 0.3s ease;
   &:hover {
-    scale: 0.9;
+    transform: scale(0.9);
   }
   &:last-child {
     border-bottom: none;

client/src/components/Header/Header.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { SUPPORTED_LANGUAGES } from "../../utils/constants";
 import styles from "./Header.module.css";
 import CustomSelect from "../CustomSelect/CustomSelect";
 
@@ -14,7 +13,6 @@ const Header = ({ isSelectVisible, onLanguageChange }) => {
       </Link>
       {isSelectVisible && (
         <CustomSelect
-          options={SUPPORTED_LANGUAGES}
           onSelect={onLanguageChange}
         />
       )}