Add image carousel yippie

web/src/pages/photos/index.astro

@@ -1,48 +1,33 @@
 ---
 import Base from "src/layout/Base.astro"
+import Carousel from "@components/photos/carousel"
 import Sidebar from "src/components/sidebar.astro"
 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: RecordModel) => {
-    const link = await pb.files.getURL(record, record.image)
-    return link.substring(21)
-}
 ---
 
 <Base>
     <div slot="sidebar">
-        <p class="text-2xl">Photography :)</p>
-        Chuck me an email if you'd like a print of these, I'll see what I can do
+        <p id="photo-title" class="bold text-2xl">{photos[0].title === "" ? "Untitled" : photos[0].title}</p>
+        <p id="photo-camera" class="text-sm">📸 {photos[0].camera}</p>
+        <p id="photo-location" class="text-sm">📌 {photos[0].location}</p>
+
+        <button id="dec-button" class="" onclick="dec()">&lt;</button>
+        <button id="inc-button" class="" onclick="inc()">&gt;</button>
+
+
+        <!-- <p class="text-2xl">Photography :)</p>
+        <p class="text-left">Chuck me an email if you'd like a print of these, I'll see what I can do</p> -->
     </div>
     
     <div slot="content">
-        {
-            photos.map(photo => (
-            <div class="max-w-md  overflow-hidden md:max-w-2xl md:my-2">
-                <div class="md:flex">
-                    <div class="md:shrink-0">
-                        <img class="h-full w-full object-cover md:h-full md:w-96" src={ pb.files.getURL(photo, photo.image, {'thumb': '1080x0'}) } alt={photo.alt}>
-                    </div>
-                    <div class="md:pl-4 md:mt-2 mb-8 mt-3">
-                        <div class="bold text-xl">{photo.title === "" ? "Untitled" : photo.title}</div>
-                        
-                        <div class="pt-2">
-                            <p>📌 {photo.location}</p>
-                            <p>📷 {photo.camera}</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            ))
-        }
+        <Carousel/>
     </div>
     
 </Base>