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