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>
   );
 }