feat: add carousel to image-viewer component

src/app/components/carousel.tsx

@@ -28,7 +28,7 @@ export default function Carousel({ images, className }: Props) {
 				<div className="flex">
 					{images.map((src, index) => (
 						<div key={index} className="flex-[0_0_100%]">
-							<ImageViewer 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" images={images} />
 						</div>
 					))}
 				</div>

src/app/components/image-viewer.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import Image from "next/image";
+
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
+import useEmblaCarousel from "embla-carousel-react";
 import { Icon } from "@iconify/react";
 
 interface Props {
@@ -11,12 +13,17 @@ interface Props {
 	width: number;
 	height: number;
 	className?: string;
+	images?: string[];
 }
 
-export default function ImageViewer({ src, alt, width, height, className }: Props) {
+export default function ImageViewer({ src, alt, width, height, className, images = [] }: Props) {
 	const [isOpen, setIsOpen] = useState(false);
 	const [isVisible, setIsVisible] = useState(false);
 
+	const [emblaRef, emblaApi] = useEmblaCarousel();
+	const [selectedIndex, setSelectedIndex] = useState(0);
+	const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
+
 	const close = () => {
 		setIsVisible(false);
 		setTimeout(() => {
@@ -31,6 +38,21 @@ export default function ImageViewer({ src, alt, width, height, className }: Prop
 		}
 	}, [isOpen]);
 
+	useEffect(() => {
+		if (!emblaApi) return;
+
+		// Keep order of images whilst opening on src
+		const index = images.indexOf(src);
+		if (index !== -1) {
+			emblaApi.scrollTo(index);
+			setSelectedIndex(index);
+		}
+
+		// Scroll snaps
+		setScrollSnaps(emblaApi.scrollSnapList());
+		emblaApi.on("select", () => setSelectedIndex(emblaApi.selectedScrollSnap()));
+	}, [emblaApi]);
+
 	return (
 		<>
 			<Image src={src} alt={alt} width={width} height={height} className={`cursor-pointer ${className}`} onClick={() => setIsOpen(true)} />
@@ -50,13 +72,81 @@ export default function ImageViewer({ src, alt, width, height, className }: Prop
 								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">
+							<div className="z-50 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 className="overflow-hidden rounded-2xl" ref={emblaRef}>
+								<div className="flex">
+									{images.length == 0 ? (
+										<Image src={src} alt={alt} width={576} height={576} className="w-full" />
+									) : (
+										<>
+											{images.map((image, index) => (
+												<div key={index} className="flex-[0_0_100%]">
+													<Image src={image} alt={alt} width={576} height={576} className="w-full" />
 												</div>
+											))}
+										</>
+									)}
+								</div>
+							</div>
+						</div>
+
+						{images.length != 0 && (
+							<>
+								{/* Carousel buttons */}
+								{/* Prev button */}
+								<div
+									className={`z-50 absolute left-2 top-1/2 -translate-y-1/2 transition-opacity duration-300 ${
+										isVisible ? "opacity-100" : "opacity-0"
+									}`}
+								>
+									<button
+										onClick={() => emblaApi?.scrollPrev()}
+										disabled={!emblaApi?.canScrollPrev()}
+										className={`bg-white p-1 rounded-full shadow text-4xl transition-opacity ${
+											emblaApi?.canScrollPrev() ? "opacity-100 cursor-pointer" : "opacity-50"
+										}`}
+									>
+										<Icon icon="ic:round-chevron-left" />
+									</button>
+								</div>
+								{/* Next button */}
+								<div
+									className={`z-50 absolute right-2 top-1/2 -translate-y-1/2 transition-opacity duration-300 ${
+										isVisible ? "opacity-100" : "opacity-0"
+									}`}
+								>
+									<button
+										onClick={() => emblaApi?.scrollNext()}
+										disabled={!emblaApi?.canScrollNext()}
+										className={`bg-white p-1 rounded-full shadow text-4xl transition-opacity ${
+											emblaApi?.canScrollNext() ? "opacity-100 cursor-pointer" : "opacity-50"
+										}`}
+									>
+										<Icon icon="ic:round-chevron-right" />
+									</button>
+								</div>
+
+								{/* Carousel snaps */}
+								<div
+									className={`z-50 flex justify-center gap-2 absolute left-1/2 -translate-x-1/2 bottom-4 transition-opacity duration-300 ${
+										isVisible ? "opacity-100" : "opacity-0"
+									}`}
+								>
+									{scrollSnaps.map((_, index) => (
+										<button
+											key={index}
+											onClick={() => emblaApi?.scrollTo(index)}
+											className={`size-3 cursor-pointer rounded-full ${index === selectedIndex ? "bg-black" : "bg-black/25"}`}
+										/>
+									))}
+								</div>
+							</>
+						)}
 					</div>,
 					document.body
 				)}