src/components/Detail/ImageCarousel.astro

@@ -21,6 +21,14 @@ const links = await Promise.all(
     const links = dataElement ? JSON.parse(dataElement.textContent || '[]') : [];
     const cap = links.length - 1;
     const img = document.getElementById('carousel-img') as HTMLImageElement;
+
+    if (cap == 0) {
+        const b0 = document.getElementById('dec-button')
+        const b1 = document.getElementById('inc-button')
+
+        b0.hidden = true
+        b1.hidden = true
+    }
     
     function inc() { 
         pos = pos === cap ? 0 : pos + 1;
@@ -41,7 +49,10 @@ const links = await Promise.all(
     <!-- Hidden element to pass server data to client -->
     <div class="hidden" id="carousel-data">{JSON.stringify(links)}</div>
     
-    <img id="carousel-img" src={links[0]} />
-    <button onclick="inc()">NEXT</button>
-    <button onclick="dec()">PREV</button>
+    <div class="relative flex items-center w-70 h-60">
+        <button id="dec-button" class="absolute left-2" onclick="dec()">PREV</button>
+        <img id="carousel-img" class="w-full h-full object-contain" src={links[0]} />
+        <!-- <div class="w-70 h-60 bg-green-600" /> -->
+        <button id="inc-button" class="absolute right-2" onclick="inc()">NEXT</button>
+    </div>
 </div>

src/pages/recipe/[recipeid].astro

@@ -7,10 +7,24 @@ const { recipeid } = Astro.params;
 
 const re = await client.collection("recipes").getOne(recipeid ?? "0");
 
+const stepIds = re.steps
+
+const steps = await Promise.all(
+    stepIds.map(async s =>
+        await client.collection("steps").getOne(s)
+    )
+)
+
 ---
 
 <SiteLayout>
     <div class="flex">
         <ImageCarousel recipe={re} />
+
+        <div class="flex flex-col pl-4">
+            <p class=" text-[28pt] font-bold">{re.name}</p>
+            
+            {steps.map(a => (<p>{a.instruction}</p>))}
+        </div>
     </div>
 </SiteLayout>