Increase spacing for justified layout

astro/src/components/common/Pagination.astro

@@ -0,0 +1,24 @@
+---
+interface Props {
+    page: number;
+    totalPages: number;
+    urlTemplate: string;
+}
+
+const { page, totalPages, urlTemplate } = Astro.props;
+---
+
+<div class="flex flex-row gap-2">
+    { totalPages < 7 && (
+        <>
+        { [...Array(totalPages)].map((_: number, i: number) => (
+            <a
+                href={`${i + 1 === 1 ? urlTemplate : `${urlTemplate}/${i + 1}`}`}
+                class={`flex select-none hover:cursor-pointer text-lg justify-center items-center 
+                    ${(i + 1 === page) ? "bg-(--ptc) text-(--ptt)" : "bg-neutral-200"} hover:bg-(--stc) hover:text-(--stt) duration-300 shadow-md rounded-full w-12 h-12`.trim()}>
+                <span>{i + 1}</span>
+            </a>
+        )) }
+        </>
+    ) }
+</div>

astro/src/components/photos/Album.astro

@@ -1,8 +1,9 @@
 ---
-import { getPhotoRoute } from '@/lib/routing';
+import { getAlbumRoute, getPhotoRoute } from '@/lib/routing';
 import { AlbumPhotos } from './Album.tsx';
 import { getImageSize, getImageUrl } from '@/lib/images';
 import { getSettings } from '@/content/settings/settings';
+import Pagination from '../common/Pagination.astro';
 
 interface Props {
     page: PhotoAlbumPage;
@@ -12,12 +13,13 @@ const settings = await getSettings();
 const album = Astro.props.page;
 const pageNumber = Astro.props.page.pageNumber;
 
-const startNumber = (pageNumber - 1) * settings.photo.album.perPage;
+const totalAlbumPages = Math.ceil(album.photos.length / settings.photo.album.perPage);
-const endNumber = pageNumber * settings.photo.album.perPage;
+const sliceStartNumber = (pageNumber - 1) * settings.photo.album.perPage;
+const sliceEndNumber = pageNumber * settings.photo.album.perPage;
 
 const remappedPhotos: PhotoAlbumGalleryItem[] = [];
 
-album.photos.slice(startNumber, endNumber).forEach((photo) => {
+album.photos.slice(sliceStartNumber, sliceEndNumber).forEach((photo) => {
     const resizedImage = getImageSize(photo.photo.width, photo.photo.height, 0.67);
 
     remappedPhotos.push({
@@ -41,5 +43,13 @@ album.photos.slice(startNumber, endNumber).forEach((photo) => {
         <h1 class="text-5xl font-bold">{album.title}</h1>
 
         <AlbumPhotos client:only client:load photos={remappedPhotos} />
+
+        { totalAlbumPages > 1 && (
+            <Pagination 
+                page={pageNumber}
+                totalPages={totalAlbumPages}
+                urlTemplate={getAlbumRoute(settings.photo, album)}
+            />
+        ) }
     </div>
 </div>

astro/src/components/photos/Album.tsx

@@ -39,7 +39,7 @@ export function AlbumPhotos(props: { photos: PhotoAlbumGalleryItem[] }) {
         const justifiedLayout = new JustifiedLayout(aspectRatios, {
             rowHeight: 265,
             rowWidth: containerWidth,
-            spacing: 4,
+            spacing: 10,
             heightTolerance: 0.11
         });