refactor

web/src/components/albums/albumCard.astro

@@ -0,0 +1,17 @@
+---
+import { authPB } from "@utils/pocketbase"
+const { a } = Astro.props
+const pb = await authPB()
+---
+
+<div class="swiper-slide flex flex-col md:flex-row items-center justify-center">
+    <a class="b1-no-underline" href={`/albums/${encodeURI(a.title)}`}>
+        <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}
+        />
+    </a>
+</div>

web/src/pages/albums/index.astro

@@ -1,6 +1,7 @@
 ---
 import Base from "@layout/Base";
 import { authPB } from "@utils/pocketbase";
+import AlbumCard from "@components/albums/albumCard";
 export const prerender = false
 
 const pb = await authPB()
@@ -20,39 +21,25 @@ const albums = await pb.collection('albums').getFullList({
             slidesPerView: 1,
             spaceBetween: 0,
             speed: 400,
+            loop: true,
             keyboard: {
                 enabled: true,
                 onlyInViewport: false,
-            },
-            loop: true,
+            }
         }
     )
 </script>
 
 
 <Base>
-    <!-- <div slot="sidebar" class="text-left">
+    <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>
 
     <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">
-                            <a class="b1-no-underline" href={`/albums/${encodeURI(a.title)}`}>
-                                <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}
-                                />
-                            </a>
-                        </div>
-                    ))
-                }
+                { albums.map(a =>  <AlbumCard a={a}/> ) }
             </div>
         </div>
     </div>