feat: image viewer

src/app/components/carousel.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import Image from "next/image";
 import { useCallback, useEffect, useState } from "react";
 import useEmblaCarousel from "embla-carousel-react";
 import { Icon } from "@iconify/react";
 
+import ImageViewer from "./image-viewer";
+
 interface Props {
 	images: string[];
 	className?: string;
@@ -31,7 +32,7 @@ export default function Carousel({ images, className }: Props) {
 				<div className="flex">
 					{images.map((src, index) => (
 						<div key={index} className="flex-[0_0_100%]">
-							<Image src={src} alt="mii image" width={480} height={320} className="w-full h-auto aspect-[3/2] object-contain" />
+							<ImageViewer src={src} alt="mii image" width={480} height={320} className="w-full h-auto aspect-[3/2] object-contain" />
 						</div>
 					))}
 				</div>

src/app/components/image-viewer.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "@iconify/react";
+
+interface Props {
+	src: string;
+	alt: string;
+	width: number;
+	height: number;
+	className?: string;
+}
+
+export default function ImageViewer({ src, alt, width, height, className }: Props) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+		}, 300); // duration matches animation timing
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	return (
+		<>
+			<Image src={src} alt={alt} width={width} height={height} className={`cursor-pointer ${className}`} onClick={() => setIsOpen(true)} />
+
+			{isOpen &&
+				createPortal(
+					<div className="fixed inset-0 flex items-center justify-center z-40">
+						<div
+							onClick={close}
+							className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
+								isVisible ? "opacity-100" : "opacity-0"
+							}`}
+						></div>
+
+						<div
+							className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl mx-4 shadow-lg w-full max-w-xl relative transition-discrete duration-300 ${
+								isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
+							}`}
+						>
+							<div className="absolute right-0 bg-amber-500 rounded-tr-xl rounded-bl-md p-1 flex justify-between items-center">
+								<button onClick={close} className="text-2xl cursor-pointer">
+									<Icon icon="material-symbols:close-rounded" />
+								</button>
+							</div>
+							<Image src={src} alt={alt} width={576} height={576} className="rounded-2xl w-full" />
+						</div>
+					</div>,
+					document.body
+				)}
+		</>
+	);
+}

src/app/mii/[slug]/page.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 
@@ -7,6 +6,7 @@ import { prisma } from "@/lib/prisma";
 
 import Carousel from "@/app/components/carousel";
 import LikeButton from "@/app/components/like-button";
+import ImageViewer from "@/app/components/image-viewer";
 
 interface Props {
 	params: Promise<{ slug: string }>;
@@ -108,12 +108,12 @@ export default async function MiiPage({ params }: Props) {
 			<div className="overflow-x-scroll">
 				<div className="flex gap-2 w-max py-4">
 					{images.map((src, index) => (
-						<Image
+						<ImageViewer
 							key={index}
 							src={src}
+							alt="mii screenshot"
 							width={256}
 							height={170}
-							alt="mii screenshots"
 							className="rounded-xl bg-zinc-300 border-2 border-zinc-300 shadow-md aspect-[3/2] h-full object-contain"
 						/>
 					))}