From 24c3ebb11ad3a5a29ae1a2fa866acf629a0ceee1 Mon Sep 17 00:00:00 2001
From: Sailaja Adapa <161804629+sailaja-adapa@users.noreply.github.com>
Date: Sun, 21 Jul 2024 11:10:14 +0530
Subject: [PATCH] Update NavbarRight.js

---
 frontend/src/Component/Navbar/NavbarRight.js | 56 ++++++++++++++++++--
 1 file changed, 53 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Component/Navbar/NavbarRight.js b/frontend/src/Component/Navbar/NavbarRight.js
index feb95706..acb3b049 100644
--- a/frontend/src/Component/Navbar/NavbarRight.js
+++ b/frontend/src/Component/Navbar/NavbarRight.js
@@ -1,11 +1,61 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { BsSearch } from "react-icons/bs";
+import { RxCross2 } from "react-icons/rx";
 import "../../style/Navbar.css";
+function NavbarRight({ setSearchQuery }) {
+  const [searchQuery, setLocalSearchQuery] = useState(""); // Local state to manage search query
+
+  //debounce search query
+  useEffect(() => {
+    let timer = setTimeout(() => {
+      setSearchQuery(searchQuery);
+    }, 300);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [searchQuery, setSearchQuery]);
+
+  const handleInputChange = (e) => {
+    setLocalSearchQuery(e.target.value); // Update the search query when input changes
+  };
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    setSearchQuery(searchQuery); // Pass the search query to the parent component (App)
+  };
+
+  const clearSearchHandler = (e) => {
+    e.preventDefault();
+    setLocalSearchQuery("");
+    setSearchQuery(""); // Pass the empty search query to the parent component (App)
+  };
 
-function NavbarRight() {
   return (
     <div className="navbar-right" id="navbarTogglerDemo03">
-      {/* Remove the search bar */}
+      <div className="search">
+        <form role="search" className="search-bar" onSubmit={handleSearch}>
+          <div className="box" focus>
+            <input
+              type="text"
+              className="input"
+              placeholder="Search . . ."
+              value={searchQuery} // Set input value to the search query
+              onChange={handleInputChange}
+            />
+
+            <button
+              className={`span ${!searchQuery && "invisible"}`}
+              type="button"
+              onClick={clearSearchHandler}
+            >
+              <RxCross2 />
+            </button>
+            <button className="span" type="submit">
+              <BsSearch />
+            </button>
+          </div>
+        </form>
+      </div>
     </div>
   );
 }