Working ImageSortGallery

src/components/portfolio/images/ImageGallery.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { PortfolioImage } from "@/generated/prisma";
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+import Link from "next/link";
+
+export default function ImageGallery({ images }: { images: PortfolioImage[] }) {
+  console.log(images);
+  return (
+    <div className="w-full flex flex-col gap-4">
+      <div
+        className="flex flex-wrap gap-4"
+      >
+        {images.map((image) => (
+          <div key={image.id} style={{ width: 200, height: 200 }}>
+            <Link href={`/portfolio/images/${image.id}`}>
+              <div
+                className={cn(
+                  "overflow-hidden transition-all duration-100",
+                  "w-full h-full",
+                  "hover:border-2 border-transparent"
+                )}
+                style={{
+                  '--tw-border-opacity': 1,
+                } as React.CSSProperties}
+              >
+                <div
+                  className={cn(
+                    "relative w-full h-full"
+                  )}
+                >
+                  <Image
+                    src={`/api/image/thumbnail/${image.fileKey}.webp`}
+                    alt={image.altText ?? image.name ?? "Image"}
+                    fill
+                    className={cn("object-cover"
+                    )}
+                    loading="lazy"
+                  />
+                </div>
+              </div>
+            </Link>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}