fix: Correct SpaceBrowser component structure and remove outdated random space fetching logic

components/shuffler/index.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 
-import { getSpace } from "@/app/actions";
+import { fetchFilteredSpaces } from "@/utils/network";
 import { Space as SpaceProps } from "@/utils/types";
 import { Space } from "@/components/space";
 
@@ -47,45 +47,4 @@ export const SpaceBrowser = ({
       </footer>
     </motion.div>
   );
-};
-  space: initialSpace,
-  nextSpace: initialNextSpace,
-}: {
-  space: SpaceProps;
-  nextSpace: SpaceProps;
-}) => {
-  const [index, setIndex] = useState(0);
-  const [space, setSpace] = useState<SpaceProps>(
-    JSON.parse(JSON.stringify(initialSpace))
-  );
-  const [nextSpace, setNextSpace] = useState<SpaceProps>(
-    JSON.parse(JSON.stringify(initialNextSpace))
-  );
-
-  return (
-    <motion.div className="grid grid-cols-1 gap-10 relative">
-      <div className="relative w-full h-[290px] lg:h-[350px]">
-        <AnimatePresence initial={false}>
-          <Card key={index + 1} front={false}>
-            <Space space={nextSpace} />
-          </Card>
-          <Card key={index} front={true} index={index} setIndex={setIndex}>
-            <Space space={space} />
-          </Card>
-        </AnimatePresence>
-      </div>
-      <div className="w-4 h-[1px] bg-white/50 mx-auto hidden lg:block" />
-      <footer className="flex items-center justify-center fixed lg:relative bottom-0 left-0 w-full">
-        <ButtonShuffler
-          onClick={() => {
-            getSpace().then((newSpace) => {
-              setSpace(nextSpace);
-              setNextSpace(newSpace);
-              setIndex(index + 1);
-            });
-          }}
-        />
-      </footer>
-    </motion.div>
-  );
 };

utils/network.ts

@@ -41,22 +41,4 @@ export const fetchFilteredSpaces = async (hardwareType: 'gpu' | 'cpu', searchQue
     colorTo: COLORS.to[space.colorTo as keyof typeof COLORS.from] || COLORS.to.pink,
   }));
 };
-  const randomPage = Math.floor(Math.random() * 100) + 1;
-  const url = `https://huggingface.co/spaces-json?p=${randomPage}&runtime.stage=RUNNING&sort=trending`;
-  const response = await fetch(url);
-  const json = await response.json();
-  const spaces = json?.spaces;
-
-  if (!spaces) {
-    return null;
-  }
-
-  const randomIndex = Math.floor(Math.random() * spaces.length);
-
-  const space = {
-    ...spaces[randomIndex],
-    colorFrom: COLORS.from[spaces[randomIndex].colorFrom as keyof typeof COLORS.from] || COLORS.from.purple,
-    colorTo: COLORS.to[spaces[randomIndex].colorTo as keyof typeof COLORS.from] || COLORS.to.pink,
-  }
-  return space;
 }

utils/types.ts

@@ -24,5 +24,5 @@ export interface SpaceRuntime {
   stage: string;
   hardware: {
     current: string;
-  }
-}
+  };
+}