Add Overlay/Backdrop for single images

picture-gallery-client/.eslintrc.json

@@ -5,8 +5,8 @@
   },
   "extends": [
     "plugin:react/recommended",
-    "airbnb",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:import/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -41,6 +41,7 @@
         ]
       }
     ],
+    "import/prefer-default-export": "off",
     "no-unused-vars": [
       "error",
       {

picture-gallery-client/src/ImageGallery/Image.tsx

@@ -0,0 +1,35 @@
+import { PhotoProps, RenderPhoto } from "react-photo-album";
+import React from "react";
+import { Backdrop } from "@mui/material";
+
+export const Image: RenderPhoto = ({
+  imageProps: { alt, style, ...rest },
+}: PhotoProps): JSX.Element => {
+  const [open, setOpen] = React.useState(false);
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleToggle = () => {
+    setOpen(!open);
+  };
+
+  return (
+    <>
+      <img
+        alt={alt}
+        style={{
+          ...style,
+        }}
+        {...rest}
+        onClick={handleToggle}
+      />
+      <Backdrop
+        sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={open}
+        onClick={handleClose}
+      >
+        <img alt={alt} {...rest} />
+      </Backdrop>
+    </>
+  );
+};

picture-gallery-client/src/ImageGallery/ImageGallery.tsx

@@ -1,5 +1,6 @@
 import PhotoAlbum, { Photo } from "react-photo-album";
 import React from "react";
+import { Image } from "./Image";
 
 function ImageGallery({ images }: { images: Photo[] }) {
   //  For all kind of settings see:
@@ -11,7 +12,7 @@ function ImageGallery({ images }: { images: Photo[] }) {
       No images available. You may want to add images in your root directory.
     </p>
   ) : (
-    <PhotoAlbum layout="masonry" photos={images} />
+    <PhotoAlbum layout="masonry" photos={images} renderPhoto={Image} />
   );
 }