add search functionality

- adds a search bar to the Spaces component, allowing users to filter spaces by title or author name.
- search is case-insensitive and updates in real-time as the user types.
- switched from useUpdateEffect to useEffect for managing router updates based on sort changes.

components/spaces/index.tsx

@@ -1,13 +1,11 @@
 "use client";
 import { useEffect, useState } from "react";
-import { useLocalStorage, useUpdateEffect } from "react-use";
 import { useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
 import { MdDarkMode, MdLightMode } from "react-icons/md";
 
 import { SpaceProps } from "@/utils/type";
 import { SpaceIcon } from "@/components/space_icon";
-
 import { Space } from "@/components/spaces/space";
 import { Sort } from "@/components/sort";
 
@@ -18,10 +16,12 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
   const [selectedGpu, setSelectedGpu] = useState<string | undefined>(undefined);
   const router = useRouter();
   const [sort, setSort] = useState<"likes" | "createdAt">("likes");
+  const [searchQuery, setSearchQuery] = useState<string>("");
 
-  useUpdateEffect(() => {
+  useEffect(() => {
     router.push("/?sort=" + sort);
-  }, [sort]);
+  }, [sort, router]);
+  
 
   const handleSelectGpu = (gpu: string) => {
     if (selectedGpu === gpu) {
@@ -31,6 +31,13 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
     setSelectedGpu(gpu);
   };
 
+  const filteredSpaces = searchQuery
+    ? spaces.filter(space =>
+        space.title?.toLowerCase().includes(searchQuery.trim().toLowerCase()) ||
+        space.authorData?.name?.toLowerCase().includes(searchQuery.trim().toLowerCase())
+      )
+    : spaces;
+  
   return (
     <section className="flex h-screen overflow-auto">
       <div className="w-full container px-6 py-10 lg:py-20 mx-auto space-y-10 lg:space-y-14">
@@ -51,7 +58,7 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
               </button>
               <div className="font-regular text-xs text-center max-w-max rounded-full border-gray-200 bg-gray-50 border text-gray-700 dark:text-slate-400 dark:bg-slate-900 dark:border-slate-800 px-3 py-2 transition-all duration-300">
                 <SpaceIcon className="inline-block w-4 h-4 mr-2 drop-shadow-lg" />
-                Browse {spaces.length} spaces
+                Browse {filteredSpaces.length} spaces
               </div>
             </div>
             <h1 className="font-extrabold text-3xl text-black dark:text-slate-100">
@@ -63,8 +70,17 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
           </div>
           <Sort value={sort} onChange={setSort} />
         </header>
+        <div className="flex items-center justify-between mb-4">
+          <input
+            type="text"
+            placeholder="Search spaces..."
+            className="w-full rounded-md border border-gray-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-gray-700 dark:text-slate-200 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-600 dark:focus:ring-purple-400"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
         <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pb-10">
-          {spaces?.map((space: SpaceProps) => (
+          {filteredSpaces?.map((space: SpaceProps) => (
             <Space
               key={space.id}
               space={space}
@@ -76,4 +92,4 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
       </div>
     </section>
   );
-};
+};