makin an albums page :3

web/src/components/index/navbar.astro

@@ -8,6 +8,10 @@ const links = [
         txt: 'photos',
         lnk: '/photos'
     },
+    {
+        txt: 'albums',
+        lnk: '/albums'
+    },
     {
         txt: 'posts',
         lnk: '/posts'

web/src/pages/albums/index.astro

@@ -0,0 +1,58 @@
+---
+import Base from "@layout/Base";
+import { authPB } from "@utils/pocketbase";
+export const prerender = false
+
+const pb = await authPB()
+
+const albums = await pb.collection('albums').getFullList({
+    sort: '-created'
+})
+---
+
+<script>
+    import Swiper from "swiper";
+    import { Keyboard } from 'swiper/modules';
+    import 'swiper/css';
+
+    const s = new Swiper('.swiper-album', {
+            modules: [Keyboard],
+            slidesPerView: 1,
+            spaceBetween: 0,
+            speed: 400,
+            keyboard: {
+                enabled: true,
+                onlyInViewport: false,
+            },
+            loop: true,
+        }
+    )
+</script>
+
+
+<Base>
+    <!-- <div slot="sidebar" class="text-left">
+        More focused photo albums. These are more single-purpose collections of photos compared to the general images of <a href="/photos">photos</a>
+    </div> -->
+
+    <div slot="content">
+        <div class="swiper-album w-full h-[80vh] overflow-hidden">
+            <div class="swiper-wrapper">
+                {
+                    albums.map(a => (
+                        <div class="swiper-slide flex flex-col md:flex-row items-center justify-center">
+                            <h1 class="flex-2 text-center pb-0 md:flex-1">{a.title}</h1>
+                            <p class="flex-2 text-center md:flex-1">{a.date}</p>
+                            <img 
+                                src={pb.files.getURL(a, a.images[0])} 
+                                class="flex-1 md:flex-2 w-full h-full object-contain"
+                                alt={a.title}
+                            />
+                        </div>
+                    ))
+                }
+            </div>
+        </div>
+    </div>
+    
+</Base>