Add lightbox

src/actions/portfolio/getJustifiedImages.ts

@@ -56,6 +56,9 @@ export interface JustifiedInputImage {
   width: number;
   height: number;
   fileKey: string;
+  fullUrl: string;
+  fullWidth: number;
+  fullHeight: number;
 }
 
 interface Variant {
@@ -199,6 +202,7 @@ export async function getJustifiedImages(
   for (const ctx of finalList) {
     const img = ctx.image;
     const variant = img.variants.find((v) => v.type === "resized");
+    const full = img.variants.find((v) => v.type === "modified");
 
     if (!variant || !variant.width || !variant.height) continue;
 
@@ -212,6 +216,9 @@ export async function getJustifiedImages(
       width: variant.width,
       height: variant.height,
       url: variant.url ?? `/api/image/resized/${img.fileKey}.webp`,
+      fullUrl: full?.url ?? `/api/image/modified/${img.fileKey}.webp`,
+      fullWidth: full?.width ?? 0,
+      fullHeight: full?.height ?? 0,
     });
   }
 

src/app/page.tsx

@@ -13,13 +13,19 @@ import Link from "next/link";
 const sections = [
   {
     title: "Art Portfolio",
-    href: "/portfolio",
+    href: "/portfolio/art",
     description: "My artwork gallery",
     icon: Palette,
   },
+  {
+    title: "Artfight",
+    href: "/portfolio/artfight",
+    description: "Artfight pieces",
+    icon: Palette,
+  },
   {
     title: "Miniatures",
-    href: "/miniatures",
+    href: "/portfolio/minis",
     description: "See my painted miniatures",
     icon: Brush,
   },

src/components/portfolio/ImageCard.tsx

@@ -3,7 +3,6 @@
 import type { Color, ImageColor, ImageVariant, PortfolioImage } from "@/generated/prisma";
 import { cn } from "@/lib/utils";
 import Image from "next/image";
-import Link from "next/link";
 
 // ---------- Type Definitions ----------
 
@@ -57,40 +56,40 @@ export function ImageCard(props: ImageCardProps) {
   // console.log(props.image);
 
   return (
-    <Link href={`/portfolio/${props.image.id}`}>
+    // <Link href={`/portfolio/${props.image.id}`}>
+    <div
+      className={cn(
+        "overflow-hidden transition-all duration-100",
+        isSquare && "aspect-square shadow-sm hover:scale-[1.01] transition-transform",
+        isMosaic && "w-full h-full",
+        "hover:border-2 border-transparent"
+      )}
+      style={{
+        backgroundColor,
+        '--tw-border-opacity': 1,
+        '--hover-border-color': backgroundColor,
+      } as React.CSSProperties}
+    >
       <div
         className={cn(
-          "overflow-hidden transition-all duration-100",
+          "relative w-full h-full",
-          isSquare && "aspect-square shadow-sm hover:scale-[1.01] transition-transform",
+          isSquare && "flex items-center justify-center"
-          isMosaic && "w-full h-full",
-          "hover:border-2 border-transparent"
         )}
-        style={{
-          backgroundColor,
-          '--tw-border-opacity': 1,
-          '--hover-border-color': backgroundColor,
-        } as React.CSSProperties}
       >
-        <div
+        <Image
+          src={src}
+          alt={altText}
+          fill={isMosaic}
+          width={isSquare ? 400 : undefined}
+          height={isSquare ? 400 : undefined}
           className={cn(
-            "relative w-full h-full",
+            isSquare && "object-contain max-w-full max-h-full",
-            isSquare && "flex items-center justify-center"
+            isMosaic && "object-cover"
           )}
-        >
+          loading="lazy"
-          <Image
+        />
-            src={src}
-            alt={altText}
-            fill={isMosaic}
-            width={isSquare ? 400 : undefined}
-            height={isSquare ? 400 : undefined}
-            className={cn(
-              isSquare && "object-contain max-w-full max-h-full",
-              isMosaic && "object-cover"
-            )}
-            loading="lazy"
-          />
-        </div>
       </div>
-    </Link>
+    </div>
+    // </Link>
   );
 }

src/components/portfolio/JustifiedGallery.tsx

@@ -6,6 +6,7 @@ import {
 } from "@/utils/justifyPortfolioImages";
 import { useEffect, useRef, useState } from "react";
 import { ImageCard } from "./ImageCard";
+import { Lightbox } from "./Lightbox";
 
 interface Props {
   images: JustifiedImage[];
@@ -17,6 +18,7 @@ export function JustifiedGallery({ images, rowHeight = 200, gap = 4 }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [containerWidth, setContainerWidth] = useState(1200);
   const [rows, setRows] = useState<JustifiedImage[][]>([]);
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
 
   useEffect(() => {
     if (!containerRef.current) return;
@@ -32,32 +34,54 @@ export function JustifiedGallery({ images, rowHeight = 200, gap = 4 }: Props) {
     setRows(newRows);
   }, [images, containerWidth, rowHeight, gap]);
 
+  const openModal = (index: number) => setSelectedIndex(index);
+
   return (
-    <div ref={containerRef} className="w-full flex flex-col" style={{ rowGap: `${gap}px` }}>
+    <>
-      {rows.length === 0 && (
+      <div ref={containerRef} className="w-full flex flex-col" style={{ rowGap: `${gap}px` }}>
-        <p className="text-muted-foreground text-center py-20">No images to display</p>
+        {rows.length === 0 && (
+          <p className="text-muted-foreground text-center py-20">No images to display</p>
+        )}
+        {rows.map((row, i) => (
+          <div
+            key={i}
+            className="flex" // Vertical gap between rows
+            style={{ columnGap: `${gap}px` }} // Horizontal gap between images
+          >
+            {row.map((img) => {
+              const index = images.findIndex((i) => i.id === img.id);
+              return (
+                <div
+                  key={img.id}
+                  style={{ width: img.width, height: img.height }}
+                  onClick={() => openModal(index)}
+                  className="cursor-zoom-in"
+                >
+                  <ImageCard
+                    image={{
+                      id: img.id,
+                      altText: img.altText,
+                      url: img.url,
+                      backgroundColor: img.backgroundColor,
+                    }}
+                    variant="mosaic"
+                  />
+                </div>
+              )
+            })}
+          </div>
+        ))}
+      </div>
+      {selectedIndex !== null && (
+        <Lightbox
+          image={images[selectedIndex]}
+          onClose={() => setSelectedIndex(null)}
+          hasPrev={selectedIndex > 0}
+          hasNext={selectedIndex < images.length - 1}
+          onPrev={() => setSelectedIndex((i) => (i !== null ? i - 1 : null))}
+          onNext={() => setSelectedIndex((i) => (i !== null ? i + 1 : null))}
+        />
       )}
-      {rows.map((row, i) => (
+    </>
-        <div
-          key={i}
-          className="flex" // Vertical gap between rows
-          style={{ columnGap: `${gap}px` }} // Horizontal gap between images
-        >
-          {row.map((img) => (
-            <div key={img.id} style={{ width: img.width, height: img.height }}>
-              <ImageCard
-                image={{
-                  id: img.id,
-                  altText: img.altText,
-                  url: img.url,
-                  backgroundColor: img.backgroundColor,
-                }}
-                variant="mosaic"
-              />
-            </div>
-          ))}
-        </div>
-      ))}
-    </div>
   );
 }

src/components/portfolio/Lightbox.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import Image from "next/image";
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+
+interface Props {
+  image: {
+    fullUrl: string;
+    altText?: string;
+    fullWidth: number;
+    fullHeight: number;
+  };
+  onClose: () => void;
+  onPrev?: () => void;
+  onNext?: () => void;
+  hasPrev?: boolean;
+  hasNext?: boolean;
+}
+
+export function Lightbox({ image, onClose, onPrev, onNext, hasPrev, hasNext }: Props) {
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+      if (e.key === "ArrowLeft" && hasPrev) onPrev?.();
+      if (e.key === "ArrowRight" && hasNext) onNext?.();
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [hasPrev, hasNext, onClose, onPrev, onNext]);
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center"
+      onClick={onClose}
+    >
+      <div
+        className="relative max-w-[80vw] max-h-[90vh] w-full h-full flex items-center justify-center p-4"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <Image
+          src={image.fullUrl}
+          alt={image.altText || ""}
+          width={image.fullWidth}
+          height={image.fullHeight}
+          className="object-contain max-w-full max-h-full rounded-md"
+        />
+
+        {/* Close */}
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 text-white hover:text-gray-300"
+        >
+          <X className="w-6 h-6" />
+        </button>
+
+        {/* Prev/Next */}
+        {hasPrev && (
+          <button
+            onClick={onPrev}
+            className="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300"
+          >
+            <ChevronLeft className="w-10 h-10" />
+          </button>
+        )}
+        {hasNext && (
+          <button
+            onClick={onNext}
+            className="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300"
+          >
+            <ChevronRight className="w-10 h-10" />
+          </button>
+        )}
+      </div>
+    </div>,
+    document.body
+  );
+}

src/components/ui/dialog.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}