From cce651531b478d86d01e21689b547353abb1eb93 Mon Sep 17 00:00:00 2001
From: itsfinniii <102350242+itsfinniii@users.noreply.github.com>
Date: Tue, 24 Mar 2026 21:24:54 +0100
Subject: [PATCH] Create the Equipment Table component

---
 astro/src/components/web/EquipmentTable.astro | 43 +++++++++++++++++++
 astro/src/components/webpage/Webpage.astro    |  2 +
 astro/src/types/components/equipment.d.ts     |  2 +-
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 astro/src/components/web/EquipmentTable.astro

diff --git a/astro/src/components/web/EquipmentTable.astro b/astro/src/components/web/EquipmentTable.astro
new file mode 100644
index 0000000..5329478
--- /dev/null
+++ b/astro/src/components/web/EquipmentTable.astro
@@ -0,0 +1,43 @@
+---
+import { markdownToHtml } from '@/lib/markdown';
+import { imageConfig } from 'astro:assets';
+import { Image } from 'astro:assets';
+
+interface Props {
+    equipment: EquipmentTableComponent;
+}
+
+const equipment = Astro.props.equipment;
+---
+
+<div class="flex lg:flex-row flex-col lg:justify-center justify-center py-12 px-12 lg:container mx-auto gap-y-8 lg:gap-x-28 gap-x-18 lg:text-left text-center">
+    <div class="flex flex-col gap-1.5">
+        <h2 class="text-5xl font-bold">{equipment.title}</h2>
+        { equipment.text !== null && (
+            <div set:html={markdownToHtml(equipment.text)}></div>
+        ) }
+    </div>
+    <table class="w-fit text-lg">
+        <tbody>
+            { equipment.items.map((item, index: number) => (
+                <tr class="odd:bg-gray-100 even:bg-white my-2">
+                    <th class={`text-right pr-4 py-0.5 leading-tight ps-4 ${index === 0 && "rounded-tl-2xl"} ${(index + 1) === equipment.items.length && "rounded-bl-2xl"}`}>
+                        <div class="flex flex-row justify-end items-center gap-1.5">
+                        { item.icon !== null && (
+                            <Image
+                                src={item.icon.url}
+                                alt={item.text}
+                                width="24"
+                                height="24"
+                            />
+                        ) }
+                        <span>{item.title}</span>
+                        </div>
+                    </th>
+                    <td class={`text-left leading-tight pe-4 ${index === 0 && "rounded-tr-2xl"} ${(index + 1) === equipment.items.length && "rounded-br-2xl"}`}>{item.text}</td>
+                </tr> 
+            )) }
+        </tbody>
+    </table>
+</div>
+
diff --git a/astro/src/components/webpage/Webpage.astro b/astro/src/components/webpage/Webpage.astro
index 183bd54..a0e7ba1 100644
--- a/astro/src/components/webpage/Webpage.astro
+++ b/astro/src/components/webpage/Webpage.astro
@@ -4,6 +4,7 @@ import Hero from '../web/Hero.astro';
 import TextWithImage from '../web/TextWithImage.astro';
 import UpcomingEvents from '../web/UpcomingEvents.astro';
 import WallOfText from '../web/WallOfText.astro';
+import EquipmentTable from '../web/EquipmentTable.astro';
 
 interface Props {
     webpage: WebpageComponent[];
@@ -22,6 +23,7 @@ console.log(Astro.props.webpage);
             { component.component === "WallOfText" && <WallOfText wallOfText={component} /> }
             { component.component === "UpcomingEvents" && <UpcomingEvents upcomingEvents={component} /> }
             { component.component === "FrequentlyAskedQuestions" && <FrequentlyAskedQuestions faq={component} /> }
+            { component.component === "EquipmentTable" && <EquipmentTable equipment={component} /> }
         </Fragment>
     )) }
 </div>
diff --git a/astro/src/types/components/equipment.d.ts b/astro/src/types/components/equipment.d.ts
index 3ec8254..1caa3f8 100644
--- a/astro/src/types/components/equipment.d.ts
+++ b/astro/src/types/components/equipment.d.ts
@@ -3,7 +3,7 @@ type EquipmentTableComponent = {
 
     id: string;
     title: string;
-    text: string;
+    text: string | null;
     items: EquipmentTableItem[];
 }