Refactor and add NSFW boolean

src/components/images/ImageColorCard.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { Image, ImageColor, ImageVariant } from "@/generated/prisma";
+import ImageComponent from "next/image";
+import Link from "next/link";
+
+type ImagePaletteWithItems = {
+  image: ImageColor & {
+    image: Image & {
+      variants: ImageVariant[];
+    }
+  };
+};
+
+export default function ImageColorCard({ image }: ImagePaletteWithItems) {
+  const thumbnail = image.image.variants.find((v) => v.type === "thumbnail");
+
+  return (
+    <Link
+      href={`/images/${image.image.id}`}
+      className="block overflow-hidden rounded-md border shadow-sm hover:shadow-md transition-shadow"
+    >
+      {thumbnail?.s3Key ? (
+        <ImageComponent
+          src={`/api/image/${thumbnail.s3Key}`}
+          alt={image.image.altText || image.image.imageName}
+          width={thumbnail.width}
+          height={thumbnail.height}
+          className="w-full h-auto object-cover"
+        />
+      ) : (
+        <div className="w-full h-48 bg-gray-100 flex items-center justify-center text-muted-foreground text-sm">
+          No Thumbnail
+        </div>
+      )}
+      <div className="p-2 text-sm truncate">{image.image.imageName} ({image.type})</div>
+    </Link>
+  );
+}