From 66567b9b688e35958d36f6fc40b2f1e6b24874be Mon Sep 17 00:00:00 2001
From: june <self@breadone.net>
Date: Wed, 13 Aug 2025 08:32:43 +1200
Subject: [PATCH] decent nice carousel working

---
 src/components/Detail/ImageCarousel.astro | 47 +++++++++++++++++++++++
 src/components/Header.astro               |  4 +-
 src/pages/recipe/[slug].astro             |  6 ++-
 3 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Detail/ImageCarousel.astro

diff --git a/src/components/Detail/ImageCarousel.astro b/src/components/Detail/ImageCarousel.astro
new file mode 100644
index 0000000..08a68d8
--- /dev/null
+++ b/src/components/Detail/ImageCarousel.astro
@@ -0,0 +1,47 @@
+---
+import client from "@/data/pocketbase";
+const { recipe } = Astro.props
+
+async function getLink(img: string) {
+    const record = await client.collection("images").getOne(img)
+    const link = await client.files.getURL(record, record.image)
+    return link
+}
+
+// Use Promise.all to wait for all async operations to complete
+const links = await Promise.all(
+    recipe.images.map((img: string) => getLink(img))
+)
+
+---
+
+<script>
+    let pos = 0;
+    const dataElement = document.getElementById('carousel-data');
+    const links = dataElement ? JSON.parse(dataElement.textContent || '[]') : [];
+    const cap = links.length - 1;
+    const img = document.getElementById('carousel-img') as HTMLImageElement;
+    
+    function inc() { 
+        pos = pos === cap ? 0 : pos + 1;
+        if (img) img.src = links[pos];
+    }
+    
+    function dec() { 
+        pos = pos === 0 ? cap : pos - 1;
+        if (img) img.src = links[pos];
+    }
+    
+    // make functions globally accessible
+    (window as any).inc = inc;
+    (window as any).dec = dec;
+</script>
+
+<div>
+    <!-- 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>
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
index c582951..2bb3951 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,8 +1,8 @@
 
 <div class="flex w-full items-center bg-yellow-100 p-5">
     <a class="flex" href="/">
-        <p class=" text-3xl">Reci</p>
-        <p class=" text-3xl text-amber-500">pie</p>
+        <p class=" text-3xl">Recipie</p>
+        <!-- <p class=" text-3xl text-amber-500">pie</p> -->
         🥧
     </a>
 
diff --git a/src/pages/recipe/[slug].astro b/src/pages/recipe/[slug].astro
index 36682eb..ec3f634 100644
--- a/src/pages/recipe/[slug].astro
+++ b/src/pages/recipe/[slug].astro
@@ -1,6 +1,8 @@
 ---
 import client from "@/data/pocketbase";
 import SiteLayout from "@/layouts/base";
+import ImageCarousel from "@/components/Detail/ImageCarousel";
+
 const { slug } = Astro.params;
 
 const re = await client.collection("recipes").getOne(slug ?? "0");
@@ -8,5 +10,7 @@ const re = await client.collection("recipes").getOne(slug ?? "0");
 ---
 
 <SiteLayout>
-    {re.name}
+    <div class="flex">
+        <ImageCarousel recipe={re} />
+    </div>
 </SiteLayout>
\ No newline at end of file