Adapt step views!

web/src/components/detail/StepIngredientSideView.astro

@@ -0,0 +1,11 @@
+---
+const { ingredients, class: className } = Astro.props;
+---
+
+<div class={className}>
+    {ingredients.map(i => (
+        <div class="text-sm">
+            <p>• {i.quantity.value.value} {i.unit || ""}  {i.name}</p>
+        </div>
+    ))}
+</div>

web/src/components/detail/StepView.astro

@@ -0,0 +1,60 @@
+---
+import StepIngredientSideView from "@component/detail/StepIngredientSideView"
+
+const { sections, allIngredients, cookware, timers, class: className } = Astro.props
+
+// Helper function to render step items
+function renderStepText(items, allIngredients, cookware, timers) {
+    return items.map(item => {
+        if (item.type === 'text') {
+            return item.value;
+        } else if (item.type === 'ingredient') {
+            const ing = allIngredients[item.index];
+            return `${ing.quantity.value.value} ${ing.unit || ''} ${ing.name}`.trim();
+        } else if (item.type === 'cookware') {
+            return cookware[item.index].name;
+        } else if (item.type === 'timer') {
+            const timer = timers[item.index];
+            return `${timer.duration.value.value} ${timer.unit}`;
+        }
+        return '';
+    }).join('');
+}
+
+// Extract ingredients used in each step
+function getStepIngredients(items, allIngredients) {
+    return items
+        .filter(item => item.type === 'ingredient')
+        .map(item => allIngredients[item.index]);
+}
+---
+
+<div class={className}>
+    <p class="text-[22pt] font-bold md:hidden">Steps</p>
+    {sections.map((section, sectionIndex) => (
+        <div class="mb-4">
+            {section.name && (
+                <h3 class="text-xl font-semibold mb-2 text-white/90">{section.name}</h3>
+            )}
+            {section.content.map((step, stepIndex) => {
+                const stepIngredients = getStepIngredients(step.items, allIngredients);
+                const stepText = renderStepText(step.items, allIngredients, cookware, timers);
+                
+                return (
+                    <div class="bg-[#2a2b2c] rounded-lg mb-2 p-3">
+                        <p class="text-bold text-[10pt]">Step {stepIndex + 1}</p>
+                        
+                        <div class="flex flex-col md:flex-row md:items-stretch">
+                            <p class="w-full md:flex-2/3 pr-1 text-left">{stepText}</p>
+                            {stepIngredients.length > 0 && (
+                                <div class="w-full md:w-auto md:flex-2/5 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={stepIngredients} />
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    ))}
+</div>

web/src/pages/recipe/[id].astro

@@ -2,6 +2,7 @@
 import Base from "@layout/Base";
 import ImageCarousel from "@component/detail/ImageCarousel";
 import InfoView from "@component/detail/InfoView";
+import StepView from "@component/detail/StepView";
 import IngredientTableView from '@component/detail/IngredientTableView'
 
 import { Recipe } from "@tmlmt/cooklang-parser";
@@ -11,7 +12,8 @@ const { id } = Astro.params
 const pb = await authPB()
 
 const re = await pb.collection('recipes').getOne(id as string)
-const recipe = new Recipe(re.cooklang)
+
+let recipeData = new Recipe(re.cooklang)
 
 const images = await Promise.all(
     re.images.map(r => pb.files.getURL(re, r))
@@ -22,24 +24,30 @@ const images = await Promise.all(
     <div class="flex flex-col md:flex-row mx-auto justify-center w-full lg:max-w-3/4 xl:max-w-2/3 2xl:max-w-1/2">
         <div class="flex md:flex-1/3 flex-col mt-2 md:mt-4 sticky">
             <ImageCarousel class="w-full" images={images} />
-            <p class="text-[28pt] font-bold leading-11 mt-2">{recipe.metadata.title ?? "Untitled Recipe"}</p>
+            <p class="text-[28pt] font-bold leading-11 mt-2">{recipeData.metadata.title ?? "Untitled Recipe"}</p>
 
             <!-- Details -->
             <InfoView 
-                prepTime={recipe.metadata["prep time"]}
-                cookTime={recipe.metadata["cook time"]}
-                description={recipe.metadata.description}
-                servings={recipe.metadata.servings}
-                tags={recipe.metadata.tags}
+                prepTime={recipeData.metadata?.["prep time"]}
+                cookTime={recipeData.metadata?.["cook time"]}
+                description={recipeData.metadata?.description}
+                servings={recipeData.metadata?.servings}
+                tags={recipeData.metadata?.tags}
             />
 
             <p class="text-[22pt] font-bold 'md:mt-4'">Ingredients</p>
-            <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={recipe.ingredients ?? []}  />
+            <IngredientTableView class:list={['md:w-80', 'px-4']} ingredients={recipeData.ingredients ?? []}  />
         </div>
         
         <div class="flex mt-4 md:flex-2/3 w-full flex-col">
             <!-- Steps -->
-            <!-- <StepView class="md:ml-3" steps={re.expand.steps ?? []} /> -->
+            <StepView 
+                class="md:ml-3" 
+                sections={recipeData.sections ?? []} 
+                allIngredients={recipeData.ingredients ?? []}
+                cookware={recipeData.cookware ?? []}
+                timers={recipeData.timers ?? []}
+            />
         </div>
 
     </div>