gallery implementation

components/Image.tsx

@@ -1,6 +1,5 @@
 import NextImage, { ImageProps } from 'next/image'
-import { ItemRef } from 'react-photoswipe-gallery'
 
-const Image = ({ ...rest }: ImageProps & { ref?: ItemRef }) => <NextImage {...rest} />
+const Image = ({ ...rest }: ImageProps) => <NextImage {...rest} />
 
 export default Image

components/MediaItem.tsx

@@ -4,7 +4,7 @@ import YoutubeVideo from './YouTubeVideo'
 const MediaItem = (props) => {
   const { type, title, data } = props
 
-  if (type !== 'video' && type !== 'photos') return null
+  if ((type !== 'video' && type !== 'photos') || !data) return null
 
   const item =
     type === 'video' ? (

components/PhotoGallery.tsx

@@ -1,20 +1,43 @@
-import 'photoswipe/dist/photoswipe.css'
-import { Gallery, Item } from 'react-photoswipe-gallery'
+import { useState } from 'react'
+import Lightbox from 'react-image-lightbox'
+import 'react-image-lightbox/style.css'
 import Image from './Image'
 
 const PhotoGallery = (props) => {
   const { title, data } = props
+  const [isOpen, setIsOpen] = useState(false)
+  const [photoIndex, setPhotoIndex] = useState(0)
 
   return (
-    <Gallery>
+    <div className="flex flex-row gap-2 p-2">
       {data.length
-        ? data.map((d: string) => (
-            <Item cropped key={d}>
-              {({ ref, open }) => <Image alt={title} ref={ref} onClick={open} src={d} />}
-            </Item>
+        ? data.map((d: string, index: number) => (
+            <Image
+              key={d}
+              alt={title}
+              onClick={() => {
+                setPhotoIndex(index)
+                setIsOpen(true)
+              }}
+              src={d}
+              className="w-full cursor-pointer object-cover"
+              width="300px"
+              height="300px"
+            />
           ))
         : null}
-    </Gallery>
+
+      {isOpen && (
+        <Lightbox
+          mainSrc={data[photoIndex]}
+          nextSrc={data[(photoIndex + 1) % data.length]}
+          prevSrc={data[(photoIndex + data.length - 1) % data.length]}
+          onCloseRequest={() => setIsOpen(false)}
+          onMovePrevRequest={() => setPhotoIndex((photoIndex + data.length - 1) % data.length)}
+          onMoveNextRequest={() => setPhotoIndex((photoIndex + 1) % data.length)}
+        />
+      )}
+    </div>
   )
 }
 

data/mediaData.ts

@@ -4,6 +4,16 @@ const mediaData = [
     title: 'Beatus - live @ Trois-Rivières Metal Fest 2004',
     data: 'GC65l2Fo1q8',
   },
+  {
+    type: 'photos',
+    title: 'Ashes of Autumn',
+    data: [
+      '/static/images/media/photos/ashes-of-autumn/01.jpg',
+      '/static/images/media/photos/ashes-of-autumn/02.jpg',
+      '/static/images/media/photos/ashes-of-autumn/03.jpg',
+      '/static/images/media/photos/ashes-of-autumn/04.jpg',
+    ],
+  },
 ]
 
 export default mediaData

package.json

@@ -24,12 +24,10 @@
     "mdx-bundler": "^8.0.0",
     "next": "12.1.0",
     "next-themes": "^0.0.14",
-    "photoswipe": "^5.2.7",
     "postcss": "^8.4.5",
     "preact": "^10.6.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-photoswipe-gallery": "^2.2.1",
     "reading-time": "1.3.0",
     "rehype-autolink-headings": "^6.1.0",
     "rehype-citation": "^0.2.0",
@@ -66,6 +64,7 @@
     "next-remote-watch": "^1.0.0",
     "prettier": "^2.5.1",
     "prettier-plugin-tailwindcss": "^0.1.4",
+    "react-image-lightbox": "^5.1.4",
     "socket.io": "^4.4.0",
     "socket.io-client": "^4.4.0",
     "typescript": "^4.6.1-rc"