Users should be able to search

src/App.scss

@@ -17,4 +17,5 @@
 @import "./assets/styles/Loader.scss";
 @import "./assets/styles/reset-password.scss";
 @import "./assets/styles/SingleProduct.scss";
-@import "./assets/styles/ImageSlider.scss";
+@import "./assets/styles/ImageSlider.scss";;
+@import "./assets/styles/Search.scss";

src/assets/styles/Search.scss

@@ -0,0 +1,80 @@
+.wrappers{
+  background-color: $container-color;
+  .upper-side {
+          display: flex;
+          align-items: center;
+          height: 10rem;
+          font-size: 1.5rem;
+         padding: 5rem;
+         border-bottom: 2px solid rgba(119, 119, 119, 0.49);
+
+         .product-name{
+           font-size: 2rem;
+           font-weight: 700;
+           color: $text-color;
+           margin-right: 2rem;
+         }
+
+         .filter-option{
+           display: flex;
+           gap: 10rem;
+
+           .selection-part{
+             display: flex;
+             align-items: center;
+             gap: 2rem;
+             font-size: 2rem;
+             font-weight: 700;
+             color: $text-color;
+
+           }
+           .search-Span-price{
+            font-size: 2rem;
+            font-weight: 700;
+            color: $text-color;
+            margin-right: 2rem;
+          }
+           .dropdown-select{
+             gap: 2rem;
+             font-size: 2rem;
+             font-weight: 700;
+             color: $text-color;
+             border: 1px solid rgba(255, 109, 24, 0.49);
+            border-radius: 4px;
+            padding: 0.5rem 2rem ;
+            font-size: 15px;
+            cursor: pointer;
+           }
+         }
+
+        }
+        .product-main{
+          display: flex;
+          .product-list{
+            display: flex;
+            flex-wrap: wrap;
+            margin: 3rem 3rem;
+            margin-left: 5rem;
+            gap: 3rem;
+          }
+          .loader-spinner {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-left: 70rem;
+            margin-top: 20rem;
+          }
+          .noResult{  
+          margin: 0 auto;
+            display: flex;
+            flex-direction: column;
+            margin-bottom: 1rem;
+            img{
+              width: auto;
+              height: 400px;
+            }
+          }
+        }
+
+
+}

src/assets/styles/SearchInput.scss

@@ -1,56 +1,89 @@
-@import "./Colors";
-
-.search-container {
-  display: flex;
-  align-items: center;
-  border: 0.1rem solid $primary-color-dark;
-  border-radius: 10rem;
-  overflow: hidden;
+
+.main-search {
+  gap:2rem;
   position: relative;
 
-  .search-icon {
-    font-size: 2.4rem;
-    padding: 0 1rem;
+  .search-container {
     display: flex;
-    color: $primary-color;
     align-items: center;
-    justify-content: center;
-    position: relative;
-    cursor: pointer;
-    z-index: 1;
-  }
+    border: 0.1rem solid $primary-color-dark;
+    border-radius: 10rem;
+    overflow: hidden;
 
-  input {
-    border: none;
-    outline: none;
-    font-family: inherit;
-    font-size: 1.6rem;
-    flex: 1;
-    background-color: transparent;
-
-    &::placeholder {
-      color: $secondary-color;
+    .search-icon {
+      font-size: 2.4rem;
+      padding-left:1rem;
+      display: flex;
+      color: $primary-color;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      cursor: pointer;
+      z-index: 1;
     }
-  }
 
-  .search-button {
-    background-color: $primary-color;
-    border: none;
-    padding: 0.8rem 4.8rem;
-    color: $white;
-    font-size: 1.6rem;
-    font-weight: 600;
-    cursor: pointer;
-    position: relative;
-    z-index: 1;
-    transition: all 0.2s ease-in;
-
-    &:hover {
-      background-color: darken($primary-color, 10%);
+    input {
+      border: none;
+      outline: none;
+      font-family: inherit;
+      font-size: 1.6rem;
+      flex: 1;
+      background-color: transparent;
+
+      &::placeholder {
+        color: $secondary-color;
+      }
     }
 
-    &:focus {
-      outline: none;
+    .search-button {
+      background-color: $primary-color;
+      border: none;
+      padding: 0.8rem 4.8rem;
+      color: $white;
+      font-size: 1.6rem;
+      font-weight: 600;
+      cursor: pointer;
+      position: relative;
+      z-index: 1;
+      transition: all 0.2s ease-in;
+
+      &:hover {
+        background-color: darken($primary-color, 10%);
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+  .search-result {
+    position: absolute;
+    width: 36.5rem;
+    max-height: 28em;
+    left: 0.5rem;
+    z-index: 1000;
+    margin-top: 0.1rem;
+    padding: 1rem;
+    font-size: 14px;
+    font-weight: 500;
+    background-color: $white;
+    overflow-y: auto;
+    text-decoration: none;
+    .result {
+      display: flex;
+      flex-direction: column;
+      padding: 13px;
+      border: 1px solid none;
+      margin-top: 1px;
+    }
+    .result:hover {
+      background: rgb(242, 240, 240);
+      padding: 15px;
+      cursor: pointer;
     }
   }
+  .link{
+    text-decoration: none;
+    color: black;
+  }
 }

src/components/buttons/Button2.tsx

@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+import React from "react";
+
+const Button = ({ title }: { title: string }) => (
+  <button type="button">{title}</button>
+);
+
+export default Button;

src/components/inputs/Input.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable */
 
 import React, { ReactNode } from "react";
-import "../../styles/Input.scss";
 
 interface InputLabelProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label: string;

src/components/inputs/SearchInput.tsx

@@ -1,21 +1,101 @@
 /* eslint-disable */
-import React from "react";
-import { FiSearch } from "react-icons/fi";
 
+import React, { useEffect, useState } from "react";
+import { FiSearch } from "react-icons/fi";
+import { useAppDispatch, useAppSelector } from "../../store/store";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { searchProduct } from "../../store/features/product/productSlice";
 interface SearchInputProps {
-  className?: string;
+  className: string;
   placeholder?: string;
 }
 
+
 function SearchInput({ className, placeholder }: SearchInputProps) {
+  const dispatch = useAppDispatch();
+  const { products } = useAppSelector((state) => state.products);
+  const [search, setSearch] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const navigate = useNavigate();
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setSearch(value);
+    dispatch(searchProduct({ name: value.trim() }));
+    setIsFocused(true);
+  };
+
+  const handleProductClick = (name: string) => {
+    setSearch(name);
+    setIsFocused(false);
+    setIsHovered(false);
+    navigate(`/search?name=${name}`);
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (search.trim()) {
+      navigate(`/search?name=${search.trim()}`);
+    }
+  };
+
+  useEffect(() => {
+    if (!search.trim()) {
+      setIsFocused(false);
+      setIsHovered(false);
+    }
+  }, [search]);
+
+  const filteredProducts = products?.filter((product: any) =>
+    product.name.toLowerCase().includes(search.toLowerCase())
+  );
+
   return (
-    <form className={`search-container ${className}`}>
-      <div className="search-icon">
-        <FiSearch />
-      </div>
-      <input type="text" placeholder={placeholder} />
-      <button className="search-button">Search</button>
-    </form>
+    <div className="main-search">
+      <form className={`search-container ${className}`} onSubmit={handleSubmit}>
+        <div className="search-icon">
+          <FiSearch />
+        </div>
+        <input
+          type="text"
+          placeholder={placeholder}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => {
+            if (!isHovered) {
+              setIsFocused(false);
+            }
+          }}
+          onChange={handleSearchChange}
+          value={search}
+        />
+        <button className="search-button" type="submit">
+          Search
+        </button>
+      </form>
+      {isFocused && search.trim() && (
+        <div
+          className="search-result"
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+        >
+          {filteredProducts && filteredProducts.length > 0 ? (
+            filteredProducts.map((product: any) => (
+              <div key={product.id} className="result">
+                <div className="link" onClick={() => handleProductClick(product.name)}>
+                  <p>{product.name}</p>
+                </div>
+              </div>
+            ))
+          ) : (
+            <div className="no-results">
+              <p>No products found</p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
   );
 }
 

src/components/layout/Footer.tsx

@@ -180,4 +180,4 @@ function Footer() {
     </footer>
   );
 }
-export default Footer;
+export default Footer;