diff --git a/src/components/lightbox.tsx b/src/components/lightbox.tsx
new file mode 100644
index 0000000..b276ff8
--- /dev/null
+++ b/src/components/lightbox.tsx
@@ -0,0 +1,76 @@
+"use client";
+import { useState } from "react";
+import Image from "next/image";
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+
+type ImageData = {
+ width: number,
+ height: number,
+ blur: `data:image/${string}`,
+ src: string,
+ camera?: string,
+ exif: Partial<{
+ ExposureBiasValue: number,
+ FNumber: number,
+ ISOSpeedRatings: number,
+ FocalLength: number,
+ DateTimeOriginal: Date,
+ LensModel: string
+ }>
+}
+
+type LightboxProps = {
+ children: React.JSX.Element[],
+ imageData: ImageData[]
+}
+
+export default function Lightbox(props: LightboxProps): React.JSX.Element {
+ const [active, setActive] = useState
(null);
+ return (
+ <>
+
+ {props.children.map((image, index) => (
+
+ ))}
+
+ { active ? (
+
+
+
+
+ {active.exif.DateTimeOriginal?.toLocaleDateString()}
+
+
+
+
+
+
+ {active.camera}
+ {active.exif.LensModel}
+ {active.exif.FocalLength}mm
+ f/{active.exif.FNumber}
+ ISO {active.exif.ISOSpeedRatings}
+ {active.exif.ExposureBiasValue}EV
+
+
+
+