Add category albums page

astro/src/components/photos/Category.astro

@@ -0,0 +1,51 @@
+---
+import { getCategoryAlbums } from "@/content/photos/albums";
+import { getSettings } from "@/content/settings/settings";
+import { getImageUrl } from "@/lib/images";
+import { getAlbumRoute } from "@/lib/routing";
+import { Image } from "astro:assets";
+
+interface Props {
+    category: PhotoCategory;
+}
+
+const category = Astro.props.category;
+const settings = await getSettings();
+const categoryAlbums = await getCategoryAlbums(settings, category.category);
+
+console.log(categoryAlbums);
+---
+
+<div
+    id={`categoryindex`}
+    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 justify-center items-center gap-2.5">
+        <h1 class="text-5xl font-bold">{categoryAlbums[0].category.title}</h1>
+    </div>
+
+    <div class="flex flex-col gap-5">
+        { categoryAlbums.map((album) => (
+            <div class="flex flex-row justify-center items-center">
+                <a href={getAlbumRoute(settings.photo, album)} class="group relative block w-[70%] overflow-hidden rounded-2xl shadow-md">
+                    <div>
+                        <Image
+                            src={getImageUrl(album.thumbnail.url)}
+                            alt={album.title}
+                            width="1200"
+                            height="630"
+                            class="rounded-2xl transition-transform duration-300 group-hover:scale-102"
+                        />
+
+                        <div class="absolute inset-0 bg-black/70 flex items-center justify-center p-6 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                            <h3 class="text-white text-5xl font-bold text-center tracking-tight">
+                                {album.title}
+                            </h3>
+                        </div>
+                    </div>
+                </a>
+            </div>
+        )) }
+    </div>
+</div>
+