From 188c366e2389ca1a31fb7f28c3691cbef89939ed Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Sun, 9 Mar 2025 11:22:41 +0800
Subject: [PATCH] feat: make preview non-clickable

---
 src/components/Content/index.tsx      |  5 +----
 src/components/ImageGallery/index.tsx | 17 +++++------------
 src/components/PostEditor/Preview.tsx |  2 +-
 3 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/src/components/Content/index.tsx b/src/components/Content/index.tsx
index 9766105..2ae7600 100644
--- a/src/components/Content/index.tsx
+++ b/src/components/Content/index.tsx
@@ -23,13 +23,11 @@ const Content = memo(
   ({
     event,
     className,
-    size = 'normal',
-    disableLightbox = false
+    size = 'normal'
   }: {
     event: Event
     className?: string
     size?: 'normal' | 'small'
-    disableLightbox?: boolean
   }) => {
     const { content, images, videos, embeddedNotes, lastNonMediaUrl } = preprocess(event)
     const isNsfw = isNsfwEvent(event)
@@ -50,7 +48,6 @@ const Content = memo(
           images={images}
           isNsfw={isNsfw}
           size={size}
-          disableLightbox={disableLightbox}
         />
       )
     }
diff --git a/src/components/ImageGallery/index.tsx b/src/components/ImageGallery/index.tsx
index 97f4d85..6fc0dd2 100644
--- a/src/components/ImageGallery/index.tsx
+++ b/src/components/ImageGallery/index.tsx
@@ -12,14 +12,12 @@ export default function ImageGallery({
   className,
   images,
   isNsfw = false,
-  size = 'normal',
-  disableLightbox = false
+  size = 'normal'
 }: {
   className?: string
   images: TImageInfo[]
   isNsfw?: boolean
   size?: 'normal' | 'small'
-  disableLightbox?: boolean
 }) {
   const { isSmallScreen } = useScreenSize()
   const [index, setIndex] = useState(-1)
@@ -35,11 +33,7 @@ export default function ImageGallery({
     imageContent = (
       <Image
         key={0}
-        className={cn(
-          'rounded-lg',
-          !disableLightbox ? 'cursor-auto' : '',
-          size === 'small' ? 'max-h-[15vh]' : 'max-h-[30vh]'
-        )}
+        className={cn('rounded-lg', size === 'small' ? 'max-h-[15vh]' : 'max-h-[30vh]')}
         classNames={{
           errorPlaceholder: cn('aspect-square', size === 'small' ? 'h-[15vh]' : 'h-[30vh]')
         }}
@@ -53,7 +47,7 @@ export default function ImageGallery({
         {images.map((image, i) => (
           <Image
             key={i}
-            className={cn('aspect-square w-full rounded-lg', !disableLightbox ? 'cursor-auto' : '')}
+            className={cn('aspect-square w-full rounded-lg')}
             image={image}
             onClick={(e) => handlePhotoClick(e, i)}
           />
@@ -66,7 +60,7 @@ export default function ImageGallery({
         {images.map((image, i) => (
           <Image
             key={i}
-            className={cn('aspect-square w-full rounded-lg', !disableLightbox ? 'cursor-auto' : '')}
+            className={cn('aspect-square w-full rounded-lg')}
             image={image}
             onClick={(e) => handlePhotoClick(e, i)}
           />
@@ -79,7 +73,7 @@ export default function ImageGallery({
         {images.map((image, i) => (
           <Image
             key={i}
-            className={cn('aspect-square w-full rounded-lg', !disableLightbox ? 'cursor-auto' : '')}
+            className={cn('aspect-square w-full rounded-lg')}
             image={image}
             onClick={(e) => handlePhotoClick(e, i)}
           />
@@ -92,7 +86,6 @@ export default function ImageGallery({
     <div className={cn('relative', images.length === 1 ? 'w-fit max-w-full' : 'w-full', className)}>
       {imageContent}
       {index >= 0 &&
-        !disableLightbox &&
         createPortal(
           <div onClick={(e) => e.stopPropagation()}>
             <Lightbox
diff --git a/src/components/PostEditor/Preview.tsx b/src/components/PostEditor/Preview.tsx
index 4cb0e2e..afc580f 100644
--- a/src/components/PostEditor/Preview.tsx
+++ b/src/components/PostEditor/Preview.tsx
@@ -15,7 +15,7 @@ export default function Preview({ content }: { content: string }) {
           pubkey: '',
           sig: ''
         }}
-        disableLightbox
+        className="pointer-events-none"
       />
     </Card>
   )