Create the Equipment Table component

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>
+

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>

astro/src/types/components/equipment.d.ts

@@ -3,7 +3,7 @@ type EquipmentTableComponent = {
 
     id: string;
     title: string;
-    text: string;
+    text: string | null;
     items: EquipmentTableItem[];
 }