package-lock.json

@@ -21,7 +21,6 @@
         "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",
@@ -40,7 +39,6 @@
       "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",
@@ -1931,15 +1929,6 @@
       "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",
@@ -3363,16 +3352,6 @@
         "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,7 +23,6 @@
     "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",
@@ -42,7 +41,6 @@
   "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,7 +51,6 @@ import {
   unformatNumber,
   signAndPublish
 } from '../utils'
-import FsLightbox from 'fslightbox-react'
 
 export const InnerModPage = () => {
   const { naddr } = useParams()
@@ -936,18 +935,6 @@ 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'
@@ -963,60 +950,52 @@ const Body = ({
   })
 
   return (
-    <>
+    <div className='IBMSMSMBSSPost'>
-      <div className='IBMSMSMBSSPost'>
+      <div
+        className='IBMSMSMBSSPostPicture'
+        style={{
+          background: `url(${featuredImageUrl}) center / cover no-repeat`
+        }}
+      ></div>
+      <div className='IBMSMSMBSSPostInside'>
+        <div className='IBMSMSMBSSPostTitle'>
+          <h1 className='IBMSMSMBSSPostTitleHeading'>{title}</h1>
+        </div>
         <div
-          className='IBMSMSMBSSPostPicture'
+          ref={postBodyRef}
-          style={{
+          className='IBMSMSMBSSPostBody'
-            background: `url(${featuredImageUrl}) center / cover no-repeat`
+          style={{ maxHeight: '250px', padding: '0 10px' }}
-          }}
+        >
-        ></div>
+          <EditorContent editor={editor} />
-        <div className='IBMSMSMBSSPostInside'>
+          <div ref={viewFullPostBtnRef} className='IBMSMSMBSSPostBodyHide'>
-          <div className='IBMSMSMBSSPostTitle'>
+            <p onClick={viewFullPost}>View</p>
-            <h1 className='IBMSMSMBSSPostTitleHeading'>{title}</h1>
-          </div>
-          <div
-            ref={postBodyRef}
-            className='IBMSMSMBSSPostBody'
-            style={{ maxHeight: '250px', padding: '0 10px' }}
-          >
-            <EditorContent editor={editor} />
-            <div ref={viewFullPostBtnRef} className='IBMSMSMBSSPostBodyHide'>
-              <p onClick={viewFullPost}>View</p>
-            </div>
-          </div>
-          <div className='IBMSMSMBSSShots'>
-            {screenshotsUrls.map((url, index) => (
-              <img
-                className='IBMSMSMBSSShotsImg'
-                src={url}
-                alt={`ScreenShot-${index}`}
-                key={url}
-                onClick={() => openLightBoxOnSlide(index + 1)}
-              />
-            ))}
-          </div>
-          <div className='IBMSMSMBSSTags'>
-            {nsfw && (
-              <div className='IBMSMSMBSSTagsTag IBMSMSMBSSTagsTagNSFW'>
-                <p>NSFW</p>
-              </div>
-            )}
-
-            {tags.map((tag, index) => (
-              <a className='IBMSMSMBSSTagsTag' href='#' key={`tag-${index}`}>
-                {tag}
-              </a>
-            ))}
           </div>
         </div>
+        <div className='IBMSMSMBSSShots'>
+          {screenshotsUrls.map((url, index) => (
+            <img
+              className='IBMSMSMBSSShotsImg'
+              src={url}
+              alt={`ScreenShot-${index}`}
+              key={`ScreenShot-${index}`}
+            />
+          ))}
+        </div>
+        <div className='IBMSMSMBSSTags'>
+          {nsfw && (
+            <div className='IBMSMSMBSSTagsTag IBMSMSMBSSTagsTagNSFW'>
+              <p>NSFW</p>
+            </div>
+          )}
+
+          {tags.map((tag, index) => (
+            <a className='IBMSMSMBSSTagsTag' href='#' key={`tag-${index}`}>
+              {tag}
+            </a>
+          ))}
+        </div>
       </div>
-      <FsLightbox
+    </div>
-        toggler={lightBoxController.toggler}
-        sources={screenshotsUrls}
-        slide={lightBoxController.slide}
-      />
-    </>
   )
 }