Gallery.tsx

import clsx from "clsx";
import React from "react";
import Carousel, { Modal, ModalGateway } from "react-images";
import carouselFormatters from "utils/carouselFormatters";

export type GalleryProps = {
	works: Array<{ title: string; author: string; image: { src: string } }>;
};

export default function Gallery({ works }: GalleryProps): JSX.Element {
	const [modalIsOpen, setIsOpen] = React.useState(false);
	const [activeIndex, setActiveIndex] = React.useState(0);

	function openModal() {
		setIsOpen(true);
	}

	function closeModal() {
		setIsOpen(false);
	}

	return (
		<>
			<section id="work-gallery" className="work-gallery fit p-3 md:p-4 xl:p-8">
				{works.map((work, i) => (
					<figure
						key={work.title + work.author}
						className={clsx(
							"flex flex-col",
							"transform-gpu hover:scale-105 transition ease-in-out",
							i !== works.length - 1 && "mb-3 md:mb-4 xl:mb-8",
						)}
					>
						<button
							type="button"
							onClick={() => {
								setActiveIndex(i);
								openModal();
							}}
						>
							<img
								className="rounded-t-lg transform hover:scale-105 transition ease-in-out"
								src={work.image.src}
								alt={work.title}
							/>
						</button>
						<figcaption className="p-4 bg-gray-900 rounded-b-lg">
							<h4 className="pb-3 text-white text-lg">{work.title}</h4>
							<h5 className="text-gray-400 text-sm">{work.author}</h5>
						</figcaption>
					</figure>
				))}
			</section>

			{ModalGateway && (
				<ModalGateway>
					{modalIsOpen && (
						<Modal onClose={closeModal}>
							<Carousel
								views={works.map((work) => ({
									source: work.image.src,
									caption: `${work.title} - ${work.author}`,
									alt: work.title,
								}))}
								currentIndex={activeIndex}
								formatters={carouselFormatters}
							/>
						</Modal>
					)}
				</ModalGateway>
			)}
		</>
	);
}