Basic layout finished

src/components/albums/ImageList.tsx

@@ -0,0 +1,37 @@
+import { Image } from "@/generated/prisma";
+import NextImage from "next/image";
+import Link from "next/link";
+
+export default function ImageList({ images, gallerySlug, albumSlug }: { images: Image[], gallerySlug: string, albumSlug: string }) {
+
+  return (
+    <section>
+      <h1 className="text-2xl font-bold mb-4">Images</h1>
+      <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
+        {images ? images.map((img) => (
+          <Link href={`/${gallerySlug}/${albumSlug}/${img.id}`} key={img.id}>
+            <div className="group rounded-lg border overflow-hidden hover:shadow-lg transition-shadow bg-background">
+              <div className="relative aspect-[4/3] w-full bg-muted items-center justify-center">
+                {img.fileKey ? (
+                  <NextImage
+                    src={`/api/image/thumbnails/${img.fileKey}.webp`}
+                    alt={img.imageName}
+                    fill
+                    className="object-cover"
+                  />
+                ) : (
+                  <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
+                    No cover image
+                  </div>
+                )}
+              </div>
+              <div className="p-4">
+                <h2 className="text-lg font-semibold truncate text-center">{img.imageName}</h2>
+              </div>
+            </div>
+          </Link>
+        )) : "There are no images here!"}
+      </div>
+    </section>
+  );
+}