From ab068ee898a98a9b2d68abb3a2c71cede02d1e19 Mon Sep 17 00:00:00 2001
From: june <self@breadone.net>
Date: Wed, 13 Aug 2025 19:13:21 +1200
Subject: [PATCH] Add ingredients in the side of instructions. Quite messy...

---
 .../Detail/StepIngredientSideView.astro         | 17 +++++++++++++++++
 src/components/Detail/StepView.astro            | 16 ++++++++++++++--
 2 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Detail/StepIngredientSideView.astro

diff --git a/src/components/Detail/StepIngredientSideView.astro b/src/components/Detail/StepIngredientSideView.astro
new file mode 100644
index 0000000..5b6c7dd
--- /dev/null
+++ b/src/components/Detail/StepIngredientSideView.astro
@@ -0,0 +1,17 @@
+---
+import client from "@/data/pocketbase";
+
+const { ingredients, class: className } = Astro.props;
+
+const ings = await Promise.all(
+    ingredients.map(async i => await client.collection("ingredients").getOne(i))
+)
+---
+
+<div class={className}>
+    {ings.map(i => (
+        <div>
+            <p>• {i.quantity} {i.unit || " "}  {i.name}</p>
+        </div>
+    ))}
+</div>
\ No newline at end of file
diff --git a/src/components/Detail/StepView.astro b/src/components/Detail/StepView.astro
index d725388..a7652b6 100644
--- a/src/components/Detail/StepView.astro
+++ b/src/components/Detail/StepView.astro
@@ -1,13 +1,25 @@
 ---
+import { record } from "astro:schema"
+import client from "@/data/pocketbase"
+import StepIngredientSideView from "./StepIngredientSideView.astro"
+
 const { steps } = Astro.props
 ---
 
 <div class="md:ml-5 mt-2 md:mt-0">
     <p class="text-[22pt] font-bold md:hidden">Steps</p>
     { steps.map(s => (
-        <div class="bg-[#2a2b2c] rounded-lg mb-2 p-3 md:">
+        <div class="bg-[#2a2b2c] rounded-lg mb-2 p-3">
             <p class="text-bold text-[10pt]">Step {s.index + 1}</p>
-            <p>{s.instruction}</p>
+            
+            <div class="flex flex-col md:flex-row md:items-stretch">
+                <p class="w-full md:flex-2/3 pr-1 text-left">{s.instruction}</p>
+                {s.ingredients && s.ingredients.length > 0 && (
+                    <div class="w-full md:w-auto md:flex-1/3 mt-2 md:mt-0 md:ml-2 md:pl-3 md:border-l text-white/70 border-white/70">
+                        <StepIngredientSideView class="text-left" ingredients={s.ingredients} />
+                    </div>
+                )}
+            </div>
         </div>
     )) }
 </div>
\ No newline at end of file