Create base for Albums

astro/src/components/photos/Album.astro

@@ -0,0 +1,41 @@
+---
+import { getAlbumRoute, getPhotoRoute } from '@/lib/routing';
+import { AlbumPhotos } from './Album.tsx';
+import { getImageSize, getImageUrl } from '@/lib/images';
+import { getSettings } from '@/content/settings/settings';
+
+interface Props {
+    album: PhotoAlbum;
+}
+
+const settings = await getSettings();
+const album = Astro.props.album;
+
+const remappedPhotos: PhotoAlbumGalleryItem[] = [];
+
+album.photos.forEach((photo) => {
+    const resizedImage = getImageSize(photo.photo.width, photo.photo.height, 0.67);
+
+    remappedPhotos.push({
+        id: photo.id,
+        url: getPhotoRoute(settings.photo, album, photo),
+        photo: {
+            url: getImageUrl(photo.photo.url),
+            width: resizedImage.width,
+            height: resizedImage.height
+        },
+        text: photo.text
+    });
+});
+---
+
+<div    
+    id={`album-${album.id}`}
+    class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-10 gap-x-18 w-full"
+>
+    <div class="flex flex-col gap-7">
+        <h1 class="text-5xl font-bold">{album.title}</h1>
+
+        <AlbumPhotos client:only client:load photos={remappedPhotos} />
+    </div>
+</div>