Add image carousel yippie

web/src/components/photos/carousel.astro

@@ -0,0 +1,78 @@
+---
+import { authPB } from "src/utils/pocketbase";
+import type { RecordModel } from 'pocketbase'
+
+// export const prerender = false
+
+const pb = await authPB()
+const photos = await pb.collection('photos').getFullList({
+    sort: '-created'
+})
+
+const getImageLink = async (record: any) => {
+    return pb.files.getURL(record, record.image)
+}
+---
+
+<script>
+    let pos = 0;
+    const dataElement = document.getElementById('carousel-data');
+    const photos = dataElement ? JSON.parse(dataElement.textContent || '[]') : [];
+    const cap = photos.length - 1;
+    const img = document.getElementById('carousel-img') as HTMLImageElement;
+    const titleEl = document.getElementById('photo-title');
+    const cameraEl = document.getElementById('photo-camera');
+    const locationEl = document.getElementById('photo-location');
+    
+    function updatePhoto() {
+        const currentPhoto = photos[pos];
+        
+        // Update image src
+        if (img && currentPhoto) {
+            const imageUrl = `/api/files/photos/${currentPhoto.id}/${currentPhoto.image}`;
+            img.src = imageUrl;
+        }
+        
+        // Update metadata
+        if (titleEl) {
+            titleEl.textContent = currentPhoto.title || "Untitled";
+        }
+        if (cameraEl) {
+            cameraEl.textContent = currentPhoto.camera || "";
+        }
+        if (locationEl) {
+            locationEl.textContent = currentPhoto.location || "";
+        }
+    }
+    
+    function inc() { 
+        pos = pos === cap ? 0 : pos + 1;
+        updatePhoto();
+    }
+    
+    function dec() { 
+        pos = pos === 0 ? cap : pos - 1;
+        updatePhoto();
+    }
+    
+    // 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(photos)}</div>
+    
+    <!-- <div class="flex flex-col w-7/8 self-center"> -->
+            <!-- <button id="dec-button" class="" onclick="dec()">&lt;</button>
+            <button id="inc-button" class="" onclick="inc()">&gt;</button> -->
+        <img id="carousel-img" class="rounded-lg w-full h-full object-cover" src={ pb.files.getURL(photos[0], photos[0].image) } />
+        <!-- <div class="flex flex-col">
+            
+            <p id="photo-title" class="bold text-2xl">{photos[0].title === "" ? "Untitled" : photos[0].title}</p>
+            {photos[0].camera && <p id="photo-camera" class="text-sm">{photos[0].camera}</p>}
+            {photos[0].location && <p id="photo-location" class="text-sm">{photos[0].location}</p>}
+        </div> -->
+    </div>
+</div>