Refactor images

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

@@ -1,5 +1,48 @@
-export default function PortfolioImagesEditPage() {
+import DeleteImageButton from "@/components/portfolio/images/DeleteImageButton";
+import EditImageForm from "@/components/portfolio/images/EditImageForm";
+import ImageColors from "@/components/portfolio/images/ImageColors";
+import ImageVariants from "@/components/portfolio/images/ImageVariants";
+import prisma from "@/lib/prisma";
+
+export default async function PortfolioImagesEditPage({ params }: { params: { id: string } }) {
+  const { id } = await params;
+  const image = await prisma.portfolioImage.findUnique({
+    where: { id },
+    include: {
+      type: true,
+      metadata: true,
+      categories: true,
+      colors: { include: { color: true } },
+      tags: true,
+      variants: true
+    }
+  })
+
+  const categories = await prisma.portfolioCategory.findMany({ orderBy: { sortIndex: "asc" } });
+  const tags = await prisma.portfolioTag.findMany({ orderBy: { sortIndex: "asc" } });
+  const types = await prisma.portfolioType.findMany({ orderBy: { sortIndex: "asc" } });
+
+  if (!image) return <div>Image not found</div>
+
   return (
-    <div>PortfolioImagesEditPage</div>
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Edit image</h1>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        <div>
+          {image ? <EditImageForm image={image} tags={tags} categories={categories} types={types} /> : 'Image not found...'}
+          <div className="mt-6">
+            {image && <DeleteImageButton imageId={image.id} />}
+          </div>
+          <div>
+            {image && <ImageVariants variants={image.variants} />}
+          </div>
+        </div>
+        <div className="space-y-6">
+          <div>
+            {image && <ImageColors colors={image.colors} imageId={image.id} fileKey={image.fileKey} fileType={image.fileType || ""} />}
+          </div>
+        </div>
+      </div>
+    </div>
   );
 }

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

@@ -1,5 +1,10 @@
+import UploadImageForm from "@/components/portfolio/images/UploadImageForm";
+
 export default function PortfolioImagesNewPage() {
   return (
-    <div>PortfolioImagesNewPage</div>
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Upload image</h1>
+      <UploadImageForm />
+    </div>
   );
 }

src/app/portfolio/images/page.tsx

@@ -1,5 +1,24 @@
-export default function PortfolioImagesPage() {
+import ImageList from "@/components/portfolio/images/ImageList";
+import prisma from "@/lib/prisma";
+import { PlusCircleIcon } from "lucide-react";
+import Link from "next/link";
+
+export default async function PortfolioImagesPage() {
+  const images = await prisma.portfolioImage.findMany(
+    {
+      orderBy: [{ sortIndex: 'asc' }]
+    }
+  )
+
   return (
-    <div>PortfolioImagesPage</div>
+    <div>
+      <div className="flex gap-4 justify-between pb-8">
+        <h1 className="text-2xl font-bold mb-4">Images</h1>
+        <Link href="/portfolio/images/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" /> Upload new image
+        </Link>
+      </div>
+      {images && images.length > 0 ? <ImageList images={images} /> : <p>There are no images yet. Consider adding some!</p>}
+    </div>
   );
 }