CI

src/components/gallery/Gallery.tsx

@@ -2,18 +2,11 @@ import clsx from "clsx";
 import React from "react";
 import Carousel, { Modal, ModalGateway } from "react-images";
 import carouselFormatters from "utils/carouselFormatters";
-// import Modal from "react-modal";
 
 export type GalleryProps = {
 	works: Array<{ title: string; author: string; image: { src: string } }>;
 };
 
-const customStyles = {
-	content: {
-		height: "90vh",
-	},
-};
-
 export default function Gallery({ works }: GalleryProps): JSX.Element {
 	const [modalIsOpen, setIsOpen] = React.useState(false);
 	const [activeIndex, setActiveIndex] = React.useState(0);
@@ -22,10 +15,6 @@ export default function Gallery({ works }: GalleryProps): JSX.Element {
 		setIsOpen(true);
 	}
 
-	function afterOpenModal() {
-		// references are now sync'd and can be accessed.
-	}
-
 	function closeModal() {
 		setIsOpen(false);
 	}
@@ -35,6 +24,7 @@ export default function Gallery({ works }: GalleryProps): JSX.Element {
 			<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",
 							"hover:z-30 transform-gpu hover:scale-105 transition ease-in-out",
@@ -74,7 +64,6 @@ export default function Gallery({ works }: GalleryProps): JSX.Element {
 								}))}
 								currentIndex={activeIndex}
 								formatters={carouselFormatters}
-								// components={{ FooterCount: () => null }}
 							/>
 						</Modal>
 					)}