add search functionality (#3)

- add search functionality (004b4f0f73991f5631377d602b5c4edac2473f80)
- update UI (761dfc10fc024aa8b9eca5d6349008ac8759c140)


Co-authored-by: dan <[email protected]>

components/spaces/index.tsx

@@ -1,13 +1,11 @@
 "use client";
-import { useEffect, useState } from "react";
-import { useLocalStorage, useUpdateEffect } from "react-use";
+import { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
-import { MdDarkMode, MdLightMode } from "react-icons/md";
+import { MdDarkMode, MdLightMode, MdSearch } 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,11 @@ 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 +30,17 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
     setSelectedGpu(gpu);
   };
 
+  const filteredSpaces = useMemo(() => {
+    if (!searchQuery) return spaces;
+    return spaces.filter(
+      (space) =>
+        space.title?.toLowerCase().includes(searchQuery.trim().toLowerCase()) ||
+        space.authorData?.name
+          ?.toLowerCase()
+          .includes(searchQuery.trim().toLowerCase())
+    );
+  }, [spaces, searchQuery]);
+
   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 +61,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">
@@ -61,10 +71,38 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
               Discover spaces with zero GPU usage on 🤗 Hugging Face Spaces.
             </p>
           </div>
-          <Sort value={sort} onChange={setSort} />
+          <div className="flex items-center justify-end gap-2">
+            <div className="relative">
+              <MdSearch className="absolute left-2.5 top-2.5 w-5 h-5 text-gray-600 dark:text-slate-400 z-[1]" />
+              <input
+                type="text"
+                placeholder="Search spaces..."
+                className="border-[3px] text-gray-600 dark:text-slate-300 text-sm rounded-full outline-none border-gray-50 drop-shadow-sm bg-white dark:bg-slate-900 dark:border-slate-800 ring-[1px] ring-gray-200 dark:ring-slate-700 px-2.5 pl-8 py-1.5"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+            <Sort value={sort} onChange={setSort} />
+          </div>
         </header>
         <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 pb-10">
-          {spaces?.map((space: SpaceProps) => (
+          {filteredSpaces.length === 0 && (
+            <div className="col-span-full flex items-center flex-col justify-center gap-2">
+              <p className="text-neutral-500 font-regular text-base dark:text-slate-300">
+                No spaces found.
+              </p>
+              <button
+                className="text-sm text-gray-500 underline dark:text-slate-500"
+                onClick={() => {
+                  setSearchQuery("");
+                  setSelectedGpu(undefined);
+                }}
+              >
+                Reset filters
+              </button>
+            </div>
+          )}
+          {filteredSpaces?.map((space: SpaceProps) => (
             <Space
               key={space.id}
               space={space}