feat: add image gallery

package-lock.json

@@ -21,6 +21,7 @@
         "date-fns": "3.6.0",
         "dompurify": "3.1.6",
         "file-saver": "2.0.5",
+        "fslightbox-react": "1.7.6",
         "lodash": "4.17.21",
         "nostr-login": "1.5.2",
         "nostr-tools": "2.7.1",
@@ -39,6 +40,7 @@
       "devDependencies": {
         "@types/dompurify": "3.0.5",
         "@types/file-saver": "2.0.7",
+        "@types/fslightbox-react": "1.7.7",
         "@types/lodash": "4.17.7",
         "@types/papaparse": "5.3.14",
         "@types/react": "^18.3.3",
@@ -1929,6 +1931,15 @@
       "resolved": "https://registry.npmjs.org/@types/filewriter/-/filewriter-0.0.33.tgz",
       "integrity": "sha512-xFU8ZXTw4gd358lb2jw25nxY9QAgqn2+bKKjKOYfNCzN4DKCFetK7sPtrlpg66Ywe3vWY9FNxprZawAh9wfJ3g=="
     },
+    "node_modules/@types/fslightbox-react": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/@types/fslightbox-react/-/fslightbox-react-1.7.7.tgz",
+      "integrity": "sha512-pp9Y7/+L4NFlMp+PdESx66EG0/m70aqg81FNlLP08dGWvRRSvNJFv08Jc91IEQkbh/C1PpokCekNCWZqpWxiyQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/lodash": {
       "version": "4.17.7",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
@@ -3352,6 +3363,16 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/fslightbox-react": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/fslightbox-react/-/fslightbox-react-1.7.6.tgz",
+      "integrity": "sha512-7LN2GZRLHo2vZGKdH+BZDJUoUDkCRCLlZ5hOwtLtZplmGZQ9nqzpG54cTax7XNjbYGTWLT6BHdMiL5zOEhiRlA==",
+      "peerDependencies": {
+        "prop-types": ">=15.6.2",
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",

package.json

@@ -23,6 +23,7 @@
     "date-fns": "3.6.0",
     "dompurify": "3.1.6",
     "file-saver": "2.0.5",
+    "fslightbox-react": "1.7.6",
     "lodash": "4.17.21",
     "nostr-login": "1.5.2",
     "nostr-tools": "2.7.1",
@@ -41,6 +42,7 @@
   "devDependencies": {
     "@types/dompurify": "3.0.5",
     "@types/file-saver": "2.0.7",
+    "@types/fslightbox-react": "1.7.7",
     "@types/lodash": "4.17.7",
     "@types/papaparse": "5.3.14",
     "@types/react": "^18.3.3",

src/pages/innerMod.tsx

@@ -51,6 +51,7 @@ import {
   unformatNumber,
   signAndPublish
 } from '../utils'
+import FsLightbox from 'fslightbox-react'
 
 export const InnerModPage = () => {
   const { naddr } = useParams()
@@ -935,6 +936,18 @@ const Body = ({
   const postBodyRef = useRef<HTMLDivElement>(null)
   const viewFullPostBtnRef = useRef<HTMLDivElement>(null)
 
+  const [lightBoxController, setLightBoxController] = useState({
+    toggler: false,
+    slide: 1
+  })
+
+  const openLightBoxOnSlide = (slide: number) => {
+    setLightBoxController((prev) => ({
+      toggler: !prev.toggler,
+      slide
+    }))
+  }
+
   const viewFullPost = () => {
     if (postBodyRef.current && viewFullPostBtnRef.current) {
       postBodyRef.current.style.maxHeight = 'unset'
@@ -950,6 +963,7 @@ const Body = ({
   })
 
   return (
+    <>
       <div className='IBMSMSMBSSPost'>
         <div
           className='IBMSMSMBSSPostPicture'
@@ -977,7 +991,8 @@ const Body = ({
                 className='IBMSMSMBSSShotsImg'
                 src={url}
                 alt={`ScreenShot-${index}`}
-              key={`ScreenShot-${index}`}
+                key={url}
+                onClick={() => openLightBoxOnSlide(index + 1)}
               />
             ))}
           </div>
@@ -996,6 +1011,12 @@ const Body = ({
           </div>
         </div>
       </div>
+      <FsLightbox
+        toggler={lightBoxController.toggler}
+        sources={screenshotsUrls}
+        slide={lightBoxController.slide}
+      />
+    </>
   )
 }