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]}
+			/>
 		</>
 	);
 }

frontend/components/photo-viewer.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import {
+	Dialog,
+	DialogContent,
+	DialogTitle,
+	DialogTrigger,
+} from "@radix-ui/react-dialog";
+import Image, { ImageProps } from "next/image";
+import React, { useState } from "react";
+
+const PhotoViewer: React.FC<ImageProps> = ({ ...props }) => {
+	const [selected, setSelected] = useState(false);
+	return (
+		<Dialog open={selected} onOpenChange={setSelected}>
+			<DialogTitle>{props.alt}</DialogTitle>
+			<DialogTrigger asChild>
+				<Image onClick={() => setSelected(true)} {...props} />
+			</DialogTrigger>
+			<DialogContent>
+				<Image {...props} unoptimized />
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+export default PhotoViewer;