Lightbox

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;