From fb19e55139d17010fb6684c9cc9819856eb3cbda Mon Sep 17 00:00:00 2001
From: Michael <michael@actuality.nz>
Date: Fri, 1 Nov 2024 00:52:40 +1300
Subject: [PATCH] Added lab page

---
 src/components/ArrowCard.astro | 21 +++-----------
 src/components/Header.astro    |  6 ++++
 src/components/LinkCard.astro  | 28 ++++++++++++++++++
 src/pages/lab.astro            | 52 ++++++----------------------------
 4 files changed, 47 insertions(+), 60 deletions(-)
 create mode 100644 src/components/LinkCard.astro

diff --git a/src/components/ArrowCard.astro b/src/components/ArrowCard.astro
index b7087cd..2519229 100644
--- a/src/components/ArrowCard.astro
+++ b/src/components/ArrowCard.astro
@@ -1,5 +1,6 @@
 ---
 import type { CollectionEntry } from "astro:content";
+import LinkCard from "./LinkCard.astro";
 
 type Props = {
   entry: CollectionEntry<"blog"> | CollectionEntry<"projects">;
@@ -8,20 +9,6 @@ type Props = {
 const { entry } = Astro.props;
 ---
 
-<a href={`/${entry.collection}/${entry.slug}`} class="relative group flex flex-nowrap py-3 px-4 pr-10 rounded-lg border border-black/15 dark:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out">
-  <div class="flex flex-col flex-1 truncate">
-    <div class="font-semibold">
-      {entry.data.title}
-    </div>
-    <div class="text-sm">
-      {entry.data.description}
-    </div>
-  </div>
-  <svg 
-    xmlns="http://www.w3.org/2000/svg" 
-    viewBox="0 0 24 24"
-    class="absolute top-1/2 right-2 -translate-y-1/2 size-5 stroke-2 fill-none stroke-current">
-    <line x1="5" y1="12" x2="19" y2="12" class="translate-x-3 group-hover:translate-x-0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out" />
-    <polyline points="12 5 19 12 12 19" class="-translate-x-1 group-hover:translate-x-0 transition-transform duration-300 ease-in-out" />
-  </svg>
-</a>
+<LinkCard href={`/${entry.collection}/${entry.slug}`} heading={entry.data.title} subheading={entry.data.description}>
+
+</LinkCard>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 62d195f..91443e2 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -28,6 +28,12 @@ import { SITE } from "@consts";
         <Link href="/projects">
           projects
         </Link>
+        <span>
+          {`/`}
+        </span>
+        <Link href="/lab">
+          lab
+        </Link>
       </nav>
     </div>
   </Container>
diff --git a/src/components/LinkCard.astro b/src/components/LinkCard.astro
new file mode 100644
index 0000000..31cec98
--- /dev/null
+++ b/src/components/LinkCard.astro
@@ -0,0 +1,28 @@
+---
+type Props = {
+  heading: string;
+  subheading: string;
+  href: string;
+  target?: string;
+}
+
+const { heading, subheading, href, target="" } = Astro.props;
+---
+
+<a href={href} target={target} class="relative group flex flex-nowrap py-3 px-4 pr-10 rounded-lg border border-black/15 dark:border-white/20 hover:bg-black/5 dark:hover:bg-white/5 hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out">
+  <div class="flex flex-col flex-1 truncate">
+    <div class="font-semibold">
+      {heading}
+    </div>
+    <div class="text-sm">
+      {subheading}
+    </div>
+  </div>
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 24 24"
+    class="absolute top-1/2 right-2 -translate-y-1/2 size-5 stroke-2 fill-none stroke-current">
+    <line x1="5" y1="12" x2="19" y2="12" class="translate-x-3 group-hover:translate-x-0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out" />
+    <polyline points="12 5 19 12 12 19" class="-translate-x-1 group-hover:translate-x-0 transition-transform duration-300 ease-in-out" />
+  </svg>
+</a>
diff --git a/src/pages/lab.astro b/src/pages/lab.astro
index 09d4d7b..38198e0 100644
--- a/src/pages/lab.astro
+++ b/src/pages/lab.astro
@@ -2,56 +2,22 @@
 import Container from "@components/Container.astro";
 import PageLayout from "@layouts/PageLayout.astro";
 import { HOME } from "@consts";
+import LinkCard from "@components/LinkCard.astro";
 ---
 
 <PageLayout title={HOME.TITLE} description={HOME.DESCRIPTION}>
   <Container>
-    <h4 class="animate font-semibold text-black dark:text-white text-4xl font-serif">
+    <h4 class="animate font-semibold text-black dark:text-white text-4xl font-serif pb-10">
       Lab
     </h4>
-    <div class="space-y-16">
-      <section>
+    <div class="animate flex flex-col gap-4">
+      <LinkCard target="_blank" href="https://jellyfin.rausch.nz" heading="Jellyfin" subheading="Can only be accessed on the internal network or via Unifi Identity VPN"></LinkCard>
+      <LinkCard target="_blank" href="https://home.rausch.nz" heading="Home Assistant" subheading=""></LinkCard>
+      <LinkCard target="_blank" href="https://git.rausch.nz/michael" heading="Gitea" subheading=""></LinkCard>
+      <LinkCard target="_blank" href="https://vault.rausch.nz" heading="VaultWarden" subheading=""></LinkCard>
+      <LinkCard target="_blank" href="https://portainer.internal:9443" heading="Portainer" subheading="Internal Only"></LinkCard>
+      <LinkCard target="_blank" href="http://status.internal:3001" heading="Uptime-kuma" subheading="Internal Only"></LinkCard>
 
-      </section>
-
-      <section class="animate space-y-6">
-        <div class="flex flex-wrap items-center justify-between">
-          <h5 class="font-semibold text-black dark:text-white">
-            Jellyfin
-          </h5>
-          <a target="_blank" href="https://jellyfin.rausch.nz">https://jellyfin.rausch.nz</a>
-        </div>
-        <p class="text-sm">Jellyfin can only be accessed on the internal network or via Unifi Identity VPN</p>
-      </section>
-
-      <section class="animate space-y-6">
-        <div class="flex flex-wrap items-center justify-between">
-          <h5 class="font-semibold text-black dark:text-white">
-            Home Assistant
-          </h5>
-          <a target="_blank" href="https://home.rausch.nz">https://home.rausch.nz</a>
-        </div>
-      </section>
-
-      <section class="animate space-y-6">
-        <div class="flex flex-wrap items-center justify-between">
-          <h5 class="font-semibold text-black dark:text-white">
-            Gitea
-          </h5>
-          <a target="_blank" href="https://git.rausch.nz">https://git.rausch.nz</a>
-        </div>
-      </section>
-
-      <section class="animate space-y-6">
-        <div class="flex flex-wrap items-center justify-between">
-          <h5 class="font-semibold text-black dark:text-white">
-            Vaultwarden
-          </h5>
-          <a target="_blank" href="https://vault.rausch.nz">https://vault.rausch.nz</a>
-        </div>
-      </section>
-      
-     
     </div>
   </Container>
 </PageLayout>