From c08f0a5d4a100c1f93168af9867d6c8fe037a36d Mon Sep 17 00:00:00 2001
From: June <self@breadone.net>
Date: Mon, 17 Nov 2025 15:45:15 +1300
Subject: [PATCH] Dont show image cycle buttons, optimise header method

---
 web/src/components/Header.astro               | 30 +++++++++++++++----
 web/src/components/detail/ImageCarousel.astro | 10 +++----
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/web/src/components/Header.astro b/web/src/components/Header.astro
index 89595c5..a7cb544 100644
--- a/web/src/components/Header.astro
+++ b/web/src/components/Header.astro
@@ -1,15 +1,35 @@
+---
+const links = [
+    {
+        txt: "new",
+        lnk: "/recipe/new"
+    },
+    {
+        txt: "add",
+        lnk: "/recipe/import"
+    },
+    {
+        txt: "tags",
+        lnk: "/tags"
+    },
+    {
+        txt: "search",
+        lnk: "/search"
+    },
+]
+---
 
 <div class="flex w-full items-center bg-[#2a2b2c] text-white p-5">
     <a class="flex" href="/">
         <p class="text-3xl">Recipie</p>
-        <!-- <p class=" text-3xl text-amber-500">pie</p> -->
         🥧
     </a>
 
     <div class="ml-auto space-x-5">
-        <a class="hover:underline underline-offset-4" href="/recipe/new">new</a>
-        <a class="hover:underline underline-offset-4" href="/recipe/import">add</a>
-        <!-- <a class="hover:underline underline-offset-4" href="/tags">tags</a> -->
-        <a class="hover:underline underline-offset-4" >search</a>
+        {
+            links.map(({txt, lnk}) => (
+                <a class="hover:underline underline-offset-4" href={lnk}>{txt}</a>
+            ))
+        }
     </div>
 </div>
\ No newline at end of file
diff --git a/web/src/components/detail/ImageCarousel.astro b/web/src/components/detail/ImageCarousel.astro
index 784bf16..05fa80b 100644
--- a/web/src/components/detail/ImageCarousel.astro
+++ b/web/src/components/detail/ImageCarousel.astro
@@ -11,12 +11,12 @@ const { class: className, images } = Astro.props
     const cap = links.length - 1;
     const img = document.getElementById('carousel-img') as HTMLImageElement;
 
-    if (cap == 0) {
+    if (cap > 0) {
         const b0 = document.getElementById('dec-button')
         const b1 = document.getElementById('inc-button')
 
-        b0!.hidden = true
-        b1!.hidden = true
+        b0!.hidden = false
+        b1!.hidden = false
     }
     
     function inc() { 
@@ -39,9 +39,9 @@ const { class: className, images } = Astro.props
     <div class="hidden" id="carousel-data">{JSON.stringify(images)}</div>
     
     <div class="relative flex items-center w-full h-60">
-        <button id="dec-button" class="absolute left-2" onclick="dec()">&lt;</button>
+        <button id="dec-button" class="hidden absolute left-2" onclick="dec()">&lt;</button>
         <img id="carousel-img" class="rounded-lg w-full h-full object-cover" src={images[0]} />
         <!-- <div class="w-70 h-60 bg-green-600" /> -->
-        <button id="inc-button" class="absolute right-2" onclick="inc()">&gt;</button>
+        <button id="inc-button" class="hidden absolute right-2" onclick="inc()">&gt;</button>
     </div>
 </div>
\ No newline at end of file