Update header to fetch services from backend if possible

.env.example

@@ -0,0 +1,2 @@
+FRONTEND_URL=
+BACKEND_URL=

.gitignore

@@ -32,6 +32,7 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
+!.env.example
 
 # vercel
 .vercel

components/layout/Header.tsx

@@ -1,15 +1,61 @@
 import Hyperlink from "@/components/ui/Hyperlink";
+import { getServices } from "@/lib/api/helpers/services";
+import { Service } from "@/lib/api/types";
 
-export default function Header() {
+const defaultServices: Service[] = [
+  {
+    id: null,
+    title: "Git Repos",
+    description: null,
+    priority: 1,
+    link: "dagemark.se/git",
+  },
+  {
+    id: null,
+    title: "Nextcloud Drive",
+    description: null,
+    priority: 3,
+    link: "dagemark.se/drive",
+  },
+  {
+    id: null,
+    title: "Game Servers",
+    description: null,
+    priority: 4,
+    link: "gserver.dagemark.se",
+  },
+  {
+    id: null,
+    title: "Immich Album",
+    description: null,
+    priority: 5,
+    link: "album.dagemark.se",
+  },
+  {
+    id: null,
+    title: "Jellyfin Streaming",
+    description: null,
+    priority: 2,
+    link: "streaming.dagemark.se",
+  },
+];
+
+export default async function Header() {
+  let services = await getServices();
+  if (services.length < 1) {
+    services = defaultServices;
+  }
   return (
-      <header className="w-full h-full bg-slate-500 dark:bg-slate-900 flex items-center justify-between">
+    <header className="w-full h-full bg-slate-500 dark:bg-slate-900 flex items-center justify-between">
-          <nav className="flex items-center justify-around w-full h-full px-6 py-4">
+      <nav className="flex items-center justify-around w-full h-full px-6 py-4">
-              <Hyperlink name={"Git Repos"} link={"dagemark.se/git"} />
+        {services.map((service) => (
-              <Hyperlink name={"Nextcloud Drive"} link={"dagemark.se/drive"} />
+          <Hyperlink
-              <Hyperlink name={"Game Servers"} link={"gserver.dagemark.se"} />
+            key={service.priority}
-              <Hyperlink name={"Immich Album"} link={"album.dagemark.se"} />
+            name={service.title}
-              <Hyperlink name={"Jellyfin Streaming"} link={"streaming.dagemark.se"} />
+            link={service.link}
-          </nav>
+          />
-      </header>
+        ))}
-    )
+      </nav>
-}
+    </header>
+  );
+}