fixed image grid

webviewer/src/components/AimeImageGrid.tsx

@@ -1,29 +1,59 @@
-import React, { useContext } from 'react';
-import { useStaticQuery, graphql } from 'gatsby';
+import React, { useContext, useState } from 'react';
+import Lightbox from 'react-image-lightbox';
+
 import AnimeImage from './AnimeImage';
-import { ImageFiles } from '../types';
 import { ImagesContext } from './Layout';
 
 const AnimeImageGrid: React.FC = () => {
   const images = useContext(ImagesContext);
-  console.log(images);
-  const data: ImageFiles = useStaticQuery(graphql`
-    query {
-      allFile {
-        nodes {
-          relativeDirectory
-          name
-        }
-      }
-    }
-  `);
-  console.log(images);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [photoIndex, setPhotoIndex] = useState(0);
   return (
-    <div className="grid grid-flow-row-dense auto-rows-min gap-y-4 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
-      {(images as any).allImages.edges.map((file: any) => (
-        <AnimeImage image={file.node} />
-      ))}
-    </div>
+    <>
+      <div className="cursor-pointer grid grid-flow-row-dense auto-rows-min gap-4 grid-cols-1 lg:grid-cols-2 xl:grid-cols-2">
+        {images &&
+          images.edges.map(({ node }, index) => (
+            <AnimeImage
+              image={node}
+              key={node.name}
+              onClick={() => {
+                setPhotoIndex(index);
+                setIsOpen(true);
+              }}
+            />
+          ))}
+      </div>
+
+      {isOpen && images && (
+        <Lightbox
+          reactModalStyle={{ display: 'flex', backgroundColor: '' }}
+          enableZoom={true}
+          mainSrc={
+            images.edges[photoIndex].node.childImageSharp.original.src && ''
+          }
+          nextSrc={
+            images.edges[Math.min(photoIndex + 1, images.edges.length - 1)].node
+              .childImageSharp.original.src && ''
+          }
+          prevSrc={
+            images.edges[Math.max(photoIndex - 1, 0)].node.childImageSharp
+              .original.src && ''
+          }
+          onCloseRequest={() => setIsOpen(false)}
+          onMovePrevRequest={() => {
+            if (images) {
+              setPhotoIndex((photoIndex - 1) % images.edges.length);
+            }
+          }}
+          onMoveNextRequest={() => {
+            if (images) {
+              setPhotoIndex((photoIndex + 1) % images.edges.length);
+            }
+          }}
+        />
+      )}
+    </>
   );
 };