Lightbox

frontend/app/(main)/gallery/page.tsx

@@ -11,6 +11,10 @@ import {
 } from "@/components/ui/pagination";
 import useMedia from "@/hooks/use-media";
 import { Loader2 } from "lucide-react";
+import Lightbox from "yet-another-react-lightbox";
+import "yet-another-react-lightbox/styles.css";
+import Zoom from "yet-another-react-lightbox/plugins/zoom";
+import { useState } from "react";
 
 export default function PhotoGallery() {
 	const {
@@ -23,6 +27,8 @@ export default function PhotoGallery() {
 		mutate,
 	} = useMedia();
 
+	const [index, setIndex] = useState<number | null>(null);
+
 	return (
 		<div className="container mx-auto px-4 py-8">
 			<div className="flex justify-between items-center mb-8">
@@ -34,11 +40,11 @@ export default function PhotoGallery() {
 				</div>
 			) : (
 				<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-					{data?.items.map((photo) => (
+					{data?.items.map((photo, idx) => (
 						<div
 							key={photo.id}
 							className="aspect-square overflow-hidden rounded-lg shadow-md cursor-pointer"
-							onClick={() => {}}
+							onClick={() => setIndex(idx)}
 						>
 							<Image
 								src={photo.url || "/placeholder.svg"}
@@ -50,6 +56,13 @@ export default function PhotoGallery() {
 							/>
 						</div>
 					))}
+					<Lightbox
+						open={index !== null}
+						close={() => setIndex(null)}
+						slides={data?.items.map((i) => ({ src: i.url }))}
+						index={index ?? 0}
+						plugins={[Zoom]}
+					/>
 				</div>
 			)}
 			<Pagination className="mt-8">

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) => (
+			{data?.items.map((i, idx) => (
-				<CarouselItem key={i.id} className="pl-[20px] md:max-w-[452px]">
+				<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;

frontend/package-lock.json

@@ -52,6 +52,7 @@
 				"swr": "^2.3.0",
 				"tailwind-merge": "^2.6.0",
 				"tailwindcss-animate": "^1.0.7",
+				"yet-another-react-lightbox": "^3.21.7",
 				"zod": "^3.24.1"
 			},
 			"devDependencies": {
@@ -7783,6 +7784,19 @@
 				"node": ">= 14"
 			}
 		},
+		"node_modules/yet-another-react-lightbox": {
+			"version": "3.21.7",
+			"resolved": "https://registry.npmjs.org/yet-another-react-lightbox/-/yet-another-react-lightbox-3.21.7.tgz",
+			"integrity": "sha512-dcdokNuCIl92f0Vl+uzeKULnQhztIGpoZFUMvtVNUPmtwsQWpqWufeieDPeg9JtFyVCcbj4vYw3V00DS0QNoWA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=14"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
+			}
+		},
 		"node_modules/yocto-queue": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

frontend/package.json

@@ -53,6 +53,7 @@
 		"swr": "^2.3.0",
 		"tailwind-merge": "^2.6.0",
 		"tailwindcss-animate": "^1.0.7",
+		"yet-another-react-lightbox": "^3.21.7",
 		"zod": "^3.24.1"
 	},
 	"devDependencies": {