Working ImageSortGallery

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 ImageGallery from "@/components/portfolio/images/ImageGallery";
 import { Prisma } from "@/generated/prisma";
 import prisma from "@/lib/prisma";
 import { PlusCircleIcon } from "lucide-react";
@@ -79,7 +79,6 @@ export default async function PortfolioImagesPage({
           <PlusCircleIcon className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all text-primary-foreground" /> Upload new image
         </Link>
       </div>
-
       <FilterBar
         types={types}
         albums={albums}
@@ -90,14 +89,19 @@ export default async function PortfolioImagesPage({
         groupId={groupId}
       />
       <div className="mt-6">
-        {images && images.length > 0 ? <AdvancedMosaicGallery
+        {/* {images && images.length > 0 ? <MosaicGallery
           images={images.map((img) => ({
             ...img,
             width: 400,
             height: 300,
           }))}
-        /> : <p className="text-muted-foreground italic">No images found.</p>}
+        /> : <p className="text-muted-foreground italic">No images found.</p>} */}
+        {images && images.length > 0 ?
+          <ImageGallery images={images} />
+          :
+          <p className="text-muted-foreground italic">No images found.</p>
+        }
       </div>
-    </div>
+    </div >
   );
 }

src/app/portfolio/images/sort/page.tsx

@@ -0,0 +1,73 @@
+import ImageSortGallery from "@/components/portfolio/images/ImageSortGallery";
+import { Prisma } from "@/generated/prisma";
+import prisma from "@/lib/prisma";
+
+export default async function PortfolioImagesSortPage({
+  searchParams
+}: {
+  searchParams?: {
+    type?: string;
+    published?: string;
+    groupBy?: string;
+    year?: string;
+    album?: string;
+  }
+}) {
+  const {
+    type = "all",
+    published = "all",
+    groupBy = "year",
+    year,
+    album,
+  } = await searchParams ?? {};
+
+  const groupMode = groupBy === "album" ? "album" : "year";
+  const groupId = groupMode === "album" ? album ?? "all" : year ?? "all";
+
+  const where: Prisma.PortfolioImageWhereInput = {};
+
+  // Filter by type
+  if (type !== "all") {
+    where.typeId = type === "none" ? null : type;
+  }
+
+  // Filter by published status
+  if (published === "published") {
+    where.published = true;
+  } else if (published === "unpublished") {
+    where.published = false;
+  }
+
+  // Filter by group (year or album)
+  if (groupMode === "year" && groupId !== "all") {
+    where.year = parseInt(groupId);
+  } else if (groupMode === "album" && groupId !== "all") {
+    where.albumId = groupId;
+  }
+
+  const images = await prisma.portfolioImage.findMany(
+    {
+      where,
+      orderBy: [{ sortIndex: 'asc' }],
+    }
+  )
+
+  return (
+    <div>
+      <div className="mt-6">
+        {/* {images && images.length > 0 ? <MosaicGallery
+                  images={images.map((img) => ({
+                    ...img,
+                    width: 400,
+                    height: 300,
+                  }))}
+                /> : <p className="text-muted-foreground italic">No images found.</p>} */}
+        {images && images.length > 0 ?
+          <ImageSortGallery images={images} />
+          :
+          <p className="text-muted-foreground italic">No images found.</p>
+        }
+      </div>
+    </div>
+  );
+}