enable search via tags

src/components/SearchProduct/SearchProduct.jsx

@@ -12,20 +12,32 @@ import {
 } from "@mui/material";
 import { useSelector } from "react-redux";
 
+function doesSubstringExistInArray(array, substring) {
+    
+    if(array?.length == 0 || !array) return
+
+    // Convert substring to lowercase for case-insensitive matching
+    const lowerCaseSubstring = substring.toLowerCase();
+    // Check each element in the array
+    return array.some(element => element.toLowerCase().includes(lowerCaseSubstring));
+}
+
 const SearchProduct = ({ onClose }) => {
   const products = useSelector((state) => state.products.products.data);
   const [searchedProducts, setSearchedProducts] = useState([]);
   const [searchQuery, setSearchQuery] = useState("");
 
   const filterProduct = function () {
+
+    if(searchQuery?.length < 2) return
+
     let filteredProducts = products.filter((product) => {
+
       let title = product?.title?.toLowerCase();
       let search = searchQuery.toLowerCase();
-      return title?.includes(search);
+      return title?.includes(search) || doesSubstringExistInArray(product?.tags, search);
     });
 
-    // MAX show result
-    filteredProducts = filteredProducts?.slice(0, 5);
     setSearchedProducts(filteredProducts);
   };
 
@@ -61,7 +73,7 @@ const SearchProduct = ({ onClose }) => {
           <Grid size={12}>
             <TextField
               fullWidth
-              placeholder="Search for a product..."
+              placeholder="Search Products Name or Tags..."
               variant="outlined"
               value={searchQuery}
               onChange={(e) => {
@@ -92,7 +104,7 @@ const SearchProduct = ({ onClose }) => {
       </Box>
 
       {/* Product List */}
-      <Grid container sx={{ width: "100%" }} columns={12}>
+      <Grid container sx={{ width: "100%", overflowY:"scroll" }} columns={12}>
         {searchedProducts.length > 0 ? (
           searchedProducts.map((product) => {