Add ingredient table to recipe view

src/components/Detail/ImageCarousel.astro

@@ -1,6 +1,6 @@
 ---
 import client from "@/data/pocketbase";
-const { recipe } = Astro.props
+const { class: className, recipe } = Astro.props
 
 async function getLink(img: string) {
     const record = await client.collection("images").getOne(img)
@@ -26,8 +26,8 @@ const links = await Promise.all(
         const b0 = document.getElementById('dec-button')
         const b1 = document.getElementById('inc-button')
 
-        b0.hidden = true
-        b1.hidden = true
+        b0!.hidden = true
+        b1!.hidden = true
     }
     
     function inc() { 
@@ -45,7 +45,7 @@ const links = await Promise.all(
     (window as any).dec = dec;
 </script>
 
-<div>
+<div class={className}>
     <!-- Hidden element to pass server data to client -->
     <div class="hidden" id="carousel-data">{JSON.stringify(links)}</div>
     

src/components/Detail/IngredientTableView.astro

@@ -0,0 +1,42 @@
+---
+// const { ingredients } = Astro.props
+
+const { class: className, ingredients } = Astro.props
+---
+
+<!-- <div class=`bg-[#2a2b2c] rounded-lg grid grid-cols-3 text-center ${className}`>
+    <span class="font-bold">Quantity</span>
+    <span class="font-bold">Unit</span>
+    <span class="font-bold">Food</span>
+    {
+        ingredients.map(ing => (
+            <span>{ing.quantity}</span>
+            <span>{ing.unit}</span>
+            <span>{ing.name}</span>
+        ))
+    }
+
+</div> -->
+
+<table class={`table-auto bg-[#2a2b2c] rounded-lg ${className} w-full`}>
+    <thead>
+        <tr>
+            <th class="text-center px-4 py-2">Quantity</th>
+            <th class="text-center px-4 py-2">Unit</th>
+            <th class="text-center px-4 py-2">Food</th>
+        </tr>
+    </thead>
+    <tbody>
+        {
+        ingredients.map(ing => (
+            <>
+                <tr class="border-t border-gray-600">
+                    <td class="text-left px-4 py-2">{ing.quantity}</td>
+                    <td class="text-left px-4 py-2">{ing.unit}</td>
+                    <td class="text-left px-4 py-2">{ing.name}</td>
+                </tr>
+            </>
+        ))
+        }
+    </tbody>
+</table>

src/pages/recipe/[recipeid].astro

@@ -2,6 +2,7 @@
 import client from "@/data/pocketbase";
 import SiteLayout from "@/layouts/base";
 import ImageCarousel from "@/components/Detail/ImageCarousel";
+import IngredientTableView from "@/components/Detail/IngredientTableView";
 
 const { recipeid } = Astro.params;
 
@@ -9,12 +10,14 @@ const re = await client.collection("recipes").getOne(recipeid ?? "0");
 
 const stepIds = re.steps
 
-const steps = await Promise.all(
+let steps = await Promise.all(
     stepIds.map(async s =>
         await client.collection("steps").getOne(s)
     )
 )
 
+steps = steps.sort((a, b) => a.index - b.index);
+
 const ingredients = await Promise.all(
     re.ingredients.map(async s =>
         await client.collection("ingredients").getOne(s)
@@ -23,26 +26,27 @@ const ingredients = await Promise.all(
 ---
 
 <SiteLayout>
-    <div class="flex flex-col">
-        <div class="flex flex-col md:flex-row">
-            <ImageCarousel recipe={re} />
-            <!-- Title -->
-            <p class=" text-[28pt] font-bold md:pl-5">{re.name}</p>
+    <div class="flex flex-col md:flex-row">
+        <div class="flex flex-col ">
+            <ImageCarousel class="w-full" recipe={re} />
+            <p class=" md:hidden text-[28pt] font-bold leading-none mt-2">{re.name}</p>
+            <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
+            <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={ingredients}  />
         </div>
         
-        <!-- Ingredients -->
-        <div class="bg-[#2a2b2c] rounded-lg md:w-80 md:mt-4 grid grid-cols-3 px-4 text-center">
-            <span class="font-bold">Quantity</span>
-            <span class="font-bold">Unit</span>
-            <span class="font-bold">Food</span>
+        <div class="flex flex-col">
+            <p class="hidden md:block text-[28pt] font-bold pl-5">{re.name}</p>
+
+            <div class="md:ml-5 mt-2 md:mt-0">
+                <p class="text-[22pt] font-bold">Steps</p>
+                { steps.map(s => (
+                    <div class="bg-[#2a2b2c] rounded-lg mb-2 p-3 md:">
+                        <p>Step {s.index + 1}</p>
+                        <p>{s.instruction}</p>
+                    </div>
+                )) }
+            </div>
 
-            {
-                ingredients.map(ing => (
-                    <span>{ing.quantity}</span>
-                    <span>{ing.unit}</span>
-                    <span>{ing.name}</span>
-                ))
-            }
             
         </div>
 

src/styles/global.css

@@ -4,5 +4,7 @@ html {
     @apply bg-[#1d1f21];
     /* @apply bg-[#fafafa]; */
     @apply text-white;
-    @apply font-stretch-condensed;
+    /* @apply font-; */
+    @apply font-sans;
+    /* font-family: 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; */
 }