feat: add view of all packs

gui/app/page.tsx

@@ -1,5 +1,61 @@
 "use client";
 
+import { PACK_ENDPOINT, PACKS_ENDPOINT } from "@/api/ENDPOINTS";
+import { Pack } from "@/types/pack";
+import { Card, Spinner } from "flowbite-react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
 export default function Home() {
-  return <></>
+  const [packsData, setPacksData] = useState<Pack[]>([]);
+  const [packsDataLoading, setPacksDataLoading] = useState(true);
+
+  useEffect(() => {
+    async function _getPacksData() {
+      const res = await fetch(PACKS_ENDPOINT("getPacks"));
+      setPacksData(await res.json());
+      setPacksDataLoading(false);
+    }
+    _getPacksData();
+  }, []);
+
+  return (
+    <div>
+      {packsDataLoading && (
+        <div className="w-full flex justify-center items-center">
+          <Spinner></Spinner>
+        </div>
+      )}
+      {!packsDataLoading && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-2">
+          {packsData.map((pack) => {
+            return (
+              <Link key={pack._id} href={`/pack/${pack._id}`}>
+                <Card>
+                  <div className="flex gap-2 items-center">
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      alt=""
+                      src={PACK_ENDPOINT("getPackImage", pack._id)}
+                      className="w-12 h-12 rounded-md"
+                    />
+                    <div>
+                      <p className="text-xl font-semibold">{pack.title}</p>
+                      <p className="text-sm text-gray-400">by {pack.author}</p>
+                    </div>
+                  </div>
+                  <div className="flex gap-2 items-center">
+                    <p className="text-lg">{pack.modloader}</p>
+                    <p className="text-lg">{pack.version}</p>
+                    <span> | </span>
+                    <p>{pack.mods.length} mods</p>
+                  </div>
+                </Card>
+              </Link>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
 }

gui/types/file.ts

@@ -0,0 +1,7 @@
+export type ModFile = {
+    "version": string,
+    "hashes": unknown,
+    "url": string,
+    "filename": string,
+    "size": number,
+}

gui/types/mod.ts

@@ -0,0 +1,15 @@
+import { ModFile } from "./file";
+
+export type Mod = {
+    "slug": string,
+    "icon": string,
+    "title":string,
+    "developers": string[],
+    "source": string,
+    "url": string,
+    "environment": {
+        "client": boolean,
+        "server": boolean,
+    },
+    "file": ModFile,
+}

gui/types/pack.ts

@@ -0,0 +1,13 @@
+import { Mod } from "./mod";
+
+export type Pack = {
+  _id: string;
+  formatVersion: number;
+  modpackVersion: number;
+  title: string;
+  author: string;
+  version: string;
+  modloader: string;
+  updateURL: "";
+  mods: Mod[];
+};