search bar now working

frontend/src/components/Navbar.jsx

@@ -1,10 +1,11 @@
 import { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import UserDropdown from "./UserDropdown";
 import { Search, Heart } from "lucide-react";
 
 const Navbar = ({ onLogout, userName }) => {
   const [searchQuery, setSearchQuery] = useState("");
+  const navigate = useNavigate();
 
   const handleSearchChange = (e) => {
     setSearchQuery(e.target.value);
@@ -12,8 +13,14 @@ const Navbar = ({ onLogout, userName }) => {
 
   const handleSearchSubmit = (e) => {
     e.preventDefault();
-    console.log("Searching for:", searchQuery);
-    // TODO: Implement search functionality
+
+    // if (!searchQuery.trim()) return;
+
+    // Navigate to search page with query
+    navigate({
+      pathname: "/search",
+      search: `?name=${encodeURIComponent(searchQuery)}`,
+    });
   };
 
   return (
@@ -41,13 +48,19 @@ const Navbar = ({ onLogout, userName }) => {
                 <input
                   type="text"
                   placeholder="Search for books, electronics, furniture..."
-                  className="w-full p-2 pl-10 pr-4 border border-gray-300 focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
+                  className="w-full p-2 pl-10 pr-4 border border-gray-300 rounded-md focus:outline-none focus:border-green-500 focus:ring-1 focus:ring-green-500"
                   value={searchQuery}
                   onChange={handleSearchChange}
                 />
                 <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                   <Search className="h-5 w-5 text-gray-400" />
                 </div>
+                <button
+                  type="submit"
+                  className="absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 hover:text-green-500"
+                >
+                  Search
+                </button>
               </div>
             </form>
           </div>
@@ -61,6 +74,7 @@ const Navbar = ({ onLogout, userName }) => {
             >
               <Heart className="h-6 w-6" />
             </Link>
+
             {/* User Profile */}
             <UserDropdown onLogout={onLogout} userName={userName} />
           </div>