Add albums

src/app/portfolio/albums/[id]/page.tsx

@@ -0,0 +1,18 @@
+import EditAlbumForm from "@/components/portfolio/albums/EditAlbumForm";
+import prisma from "@/lib/prisma";
+
+export default async function PortfolioAlbumsEditPage({ params }: { params: { id: string } }) {
+  const { id } = await params;
+  const album = await prisma.portfolioAlbum.findUnique({
+    where: {
+      id,
+    }
+  })
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Edit Album</h1>
+      {album && <EditAlbumForm album={album} />}
+    </div>
+  );
+}

src/app/portfolio/albums/new/page.tsx

@@ -0,0 +1,10 @@
+import NewAlbumForm from "@/components/portfolio/albums/NewAlbumForm";
+
+export default function PortfolioAlbumsNewPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-4">New Album</h1>
+      <NewAlbumForm />
+    </div>
+  );
+}

src/app/portfolio/albums/page.tsx

@@ -0,0 +1,20 @@
+import ItemList from "@/components/portfolio/ItemList";
+import prisma from "@/lib/prisma";
+import { PlusCircleIcon } from "lucide-react";
+import Link from "next/link";
+
+export default async function PortfolioAlbumsPage() {
+  const items = await prisma.portfolioAlbum.findMany({})
+
+  return (
+    <div>
+      <div className="flex gap-4 justify-between pb-8">
+        <h1 className="text-2xl font-bold mb-4">Albums</h1>
+        <Link href="/portfolio/albums/new" className="flex gap-2 items-center cursor-pointer bg-primary hover:bg-primary/90 text-primary-foreground px-4 py-2 rounded">
+          <PlusCircleIcon className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all text-primary-foreground" /> Add new album
+        </Link>
+      </div>
+      {items && items.length > 0 ? <ItemList items={items} type="albums" /> : <p>There are no albums yet. Consider adding some!</p>}
+    </div>
+  );
+}

src/app/portfolio/images/page.tsx

@@ -1,5 +1,5 @@
+import { AdvancedMosaicGallery } from "@/components/portfolio/images/AdvancedMosaicGallery";
 import FilterBar from "@/components/portfolio/images/FilterBar";
-import ImageList from "@/components/portfolio/images/ImageList";
 import { Prisma } from "@/generated/prisma";
 import prisma from "@/lib/prisma";
 import { PlusCircleIcon } from "lucide-react";
@@ -23,7 +23,7 @@ export default async function PortfolioImagesPage({
     groupBy = "year",
     year,
     album,
-  } = searchParams ?? {};
+  } = await searchParams ?? {};
 
   const groupMode = groupBy === "album" ? "album" : "year";
   const groupId = groupMode === "album" ? album ?? "all" : year ?? "all";
@@ -90,7 +90,13 @@ export default async function PortfolioImagesPage({
         groupId={groupId}
       />
       <div className="mt-6">
-        {images && images.length > 0 ? <ImageList images={images} /> : <p>There are no images yet. Consider adding some!</p>}
+        {images && images.length > 0 ? <AdvancedMosaicGallery
+          images={images.map((img) => ({
+            ...img,
+            width: 400,
+            height: 300,
+          }))}
+        /> : <p className="text-muted-foreground italic">No images found.</p>}
       </div>
     </div>
   );