UPDATE: Searchbar functions on Frontend

frontend/src/components/Layout/Navbar.tsx

@@ -4,12 +4,11 @@ import Button from "./Button";
 import Sidebar from "./Sidebar";
 import { Sidebar as SidebarIcon } from "lucide-react";
 import {
-  Search as SearchIcon,
   LogIn as LogInIcon,
   LogOut as LogOutIcon,
   Settings as SettingsIcon,
 } from "lucide-react";
-import Input from "./Input";
+import SearchBar from "./SearchBar";
 import AuthModal from "../Auth/AuthModal";
 import { useAuthModal } from "../../hooks/useAuthModal";
 import { useAuth } from "../../context/AuthContext";
@@ -109,15 +108,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
           <QuickSettings />
         </div>
 
-      <div id="search-bar" className="flex items-center">
+      <SearchBar />
-        <Input
-          type="text"
-          placeholder="Search..."
-          extraClasses="pr-[30px] focus:outline-none focus:border-purple-500 focus:w-[30vw]"
-        />
-
-        <SearchIcon className="-translate-x-[28px] top-1/2 h-6 w-6 text-white" />
-      </div>
 
       {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
     </div>

frontend/src/components/Layout/SearchBar.tsx

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from "react";
+import Input from "./Input";
+import { Search as SearchIcon } from "lucide-react";
+
+const SearchBar: React.FC = () => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [debouncedQuery, setDebouncedQuery] = useState(searchQuery);
+
+  // Debounce the search query
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedQuery(searchQuery);
+    }, 500); // Wait 500ms after user stops typing
+
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  // Perform search when debounced query changes
+  useEffect(() => {
+    if (debouncedQuery.trim()) {
+      fetch(`/api/search/${debouncedQuery}`)
+        .then((response) => response.json())
+        .then((data) => {
+          console.log("Search results:", data);
+          // Handle the search results here
+        })
+        .catch((error) => {
+          console.error("Error performing search:", error);
+        });
+    }
+  }, [debouncedQuery]);
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+  };
+
+  return (
+    <div id="search-bar" className="flex items-center">
+      <Input
+        type="text"
+        placeholder="Search..."
+        value={searchQuery}
+        onChange={handleSearchChange}
+        extraClasses="pr-[30px] focus:outline-none focus:border-purple-500 focus:w-[30vw]"
+      />
+
+      <SearchIcon className="-translate-x-[28px] top-1/2 h-6 w-6 text-white" />
+    </div>
+  );
+};
+
+export default SearchBar;