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">