add sort

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

app/page.tsx

@@ -1,7 +1,6 @@
-import { Space } from "@/components/space";
-import { SpaceIcon } from "@/components/space_icon";
 import { fetchAllPages } from "@/utils";
 import { SpaceProps } from "@/utils/type";
+import { Spaces } from "@/components/spaces";
 
 async function getSpaces() {
   try {
@@ -14,27 +13,10 @@ async function getSpaces() {
 
 export default async function Home() {
   const spaces = await getSpaces();
-  console.log(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-14">
-        <header className="max-w-4xl mx-auto w-full text-center">
-          <div className="mb-6 mx-auto font-regular text-xs text-center max-w-max rounded-full border-gray-200 bg-gray-50 border text-gray-700 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
-          </div>
-          <h1 className="font-extrabold text-3xl text-black">
-            Zero GPU Spaces
-          </h1>
-          <p className="text-neutral-500 font-regular text-base">
-            Discover spaces with zero GPU usage on 🤗 Hugging Face Spaces.
-          </p>
-        </header>
-        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-          {spaces?.map((space: SpaceProps) => (
-            <Space key={space.id} space={space} />
-          ))}
-        </div>
+      <div className="w-full container px-6 py-10 lg:py-20 mx-auto space-y-10 lg:space-y-14">
+        <Spaces spaces={spaces} />
       </div>
     </section>
   );

components/sort.tsx

@@ -0,0 +1,38 @@
+import classNames from "classnames";
+import { TiHeartFullOutline } from "react-icons/ti";
+import { MdCalendarToday } from "react-icons/md";
+
+interface Props {
+  value: "likes" | "createdAt";
+  onChange: (s: "createdAt" | "likes") => void;
+}
+export const Sort = ({ value, onChange }: Props) => {
+  return (
+    <div className="flex items-center justify-center border-[3px] rounded-full border-gray-50 drop-shadow-sm bg-gray-100 ring-[1px] ring-gray-200 gap-1">
+      <button
+        className={classNames(
+          "rounded-full pl-3 pr-4 py-2.5 transition-all duration-200 font-semibold text-xs hover:bg-gray-200/70 flex items-center justify-center gap-2",
+          {
+            "bg-black hover:!bg-black text-white": value === "likes",
+          }
+        )}
+        onClick={() => onChange("likes")}
+      >
+        <TiHeartFullOutline className="w-3.5 h-3.5" />
+        Likes
+      </button>
+      <button
+        className={classNames(
+          "rounded-full pl-3 pr-4 py-2.5 transition-all duration-200 font-semibold text-xs hover:bg-gray-200/70 flex items-center justify-center gap-2",
+          {
+            "bg-black hover:!bg-black text-white": value === "createdAt",
+          }
+        )}
+        onClick={() => onChange("createdAt")}
+      >
+        <MdCalendarToday className="w-3.5 h-3.5" />
+        Date
+      </button>
+    </div>
+  );
+};

components/spaces/index.tsx

@@ -0,0 +1,47 @@
+"use client";
+import { useMemo, useState } from "react";
+
+import { SpaceProps } from "@/utils/type";
+import { SpaceIcon } from "@/components/space_icon";
+import { sortByCreatedAt, sortByLikes } from "@/utils";
+
+import { Space } from "@/components/spaces/space";
+import { Sort } from "@/components/sort";
+
+export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({
+  spaces: initialSpaces,
+}) => {
+  const [sort, setSort] = useState<"likes" | "createdAt">("createdAt");
+
+  const spaces = useMemo(() => {
+    if (sort === "likes") {
+      return sortByLikes(initialSpaces);
+    }
+    return sortByCreatedAt(initialSpaces);
+  }, [initialSpaces, sort]);
+
+  return (
+    <>
+      <header className="max-w-5xl mx-auto w-full max-lg:flex-col items-start flex lg:items-end lg:justify-between gap-4">
+        <div>
+          <div className="mb-6 font-regular text-xs text-center max-w-max rounded-full border-gray-200 bg-gray-50 border text-gray-700 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
+          </div>
+          <h1 className="font-extrabold text-3xl text-black">
+            Zero GPU Spaces
+          </h1>
+          <p className="text-neutral-500 font-regular text-base">
+            Discover spaces with zero GPU usage on 🤗 Hugging Face Spaces.
+          </p>
+        </div>
+        <Sort value={sort} onChange={setSort} />
+      </header>
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+        {spaces?.map((space: SpaceProps) => (
+          <Space key={space.id} space={space} />
+        ))}
+      </div>
+    </>
+  );
+};

utils/index.ts

@@ -1,3 +1,5 @@
+import { SpaceProps } from "./type";
+
 export const fetchAllPages = async () => {
   const filter_key = "zero-a10g";
   
@@ -10,5 +12,19 @@ export const fetchAllPages = async () => {
   });
   const jsonResponses = await Promise.all(urls);
   const spaces = jsonResponses.flat()?.filter((space) => space?.runtime?.hardware?.current === filter_key);
-  return spaces;
-};
+
+  
+  return sortByCreatedAt(spaces);
+};
+
+export const sortByCreatedAt = (spaces: SpaceProps[]) => {
+  return spaces.sort((a, b) => {
+    return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+  });
+}
+
+export const sortByLikes = (spaces: SpaceProps[]) => {
+  return spaces.sort((a, b) => {
+    return b.likes - a.likes;
+  });
+}

utils/type.ts

@@ -5,10 +5,11 @@ export interface SpaceProps {
   emoji?: string;
   runtime: any;
   shortDescription?: string;
-  likes?: number;
+  likes: number;
   authorData: Author;
   colorFrom: string;
   colorTo: string;
+  createdAt: string;
 }
 
 interface Author {