Lightbox

frontend/components/homepage-gallery.tsx

@@ -2,8 +2,11 @@
 
 import useMedia from "@/hooks/use-media";
 import { CarouselItem } from "./ui/carousel";
-import Image from "next/image";
 import { Loader2 } from "lucide-react";
+import { useState } from "react";
+import Lightbox, { SlideImage } from "yet-another-react-lightbox";
+import "yet-another-react-lightbox/styles.css";
+import Zoom from "yet-another-react-lightbox/plugins/zoom";
 
 export default function HomepageGalleryItems() {
 	const {
@@ -17,6 +20,8 @@ export default function HomepageGalleryItems() {
 		isValidating,
 	} = useMedia(20);
 
+	const [index, setIndex] = useState<number | null>(null);
+
 	if (isLoading) {
 		return (
 			<div className="flex justify-center w-full h-full">
@@ -27,8 +32,12 @@ export default function HomepageGalleryItems() {
 
 	return (
 		<>
-			{data?.items.map((i) => (
-				<CarouselItem key={i.id} className="pl-[20px] md:max-w-[452px]">
+			{data?.items.map((i, idx) => (
+				<CarouselItem
+					key={i.id}
+					onClick={() => setIndex(idx)}
+					className="pl-[20px] md:max-w-[452px] cursor-pointer"
+				>
 					<div className="w-full aspect-square">
 						<img
 							src={i.url}
@@ -38,6 +47,13 @@ export default function HomepageGalleryItems() {
 					</div>
 				</CarouselItem>
 			))}
+			<Lightbox
+				open={index !== null}
+				close={() => setIndex(null)}
+				slides={data?.items.map((i) => ({ src: i.url }))}
+				index={index ?? 0}
+				plugins={[Zoom]}
+			/>
 		</>
 	);
 }