Dont show image cycle buttons, optimise header method

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>

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>