update UI

components/spaces/index.tsx

@@ -1,8 +1,8 @@
 "use client";
-import { useEffect, useState } from "react";
+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";
@@ -21,7 +21,6 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
   useEffect(() => {
     router.push("/?sort=" + sort);
   }, [sort, router]);
-  
 
   const handleSelectGpu = (gpu: string) => {
     if (selectedGpu === gpu) {
@@ -31,13 +30,17 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
     setSelectedGpu(gpu);
   };
 
-  const filteredSpaces = searchQuery
-    ? spaces.filter(space =>
+  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;
-  
+        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">
@@ -68,18 +71,37 @@ 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="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">
+          {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}
@@ -92,4 +114,4 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
       </div>
     </section>
   );
-};
+};