From 3e3b64cf00387985f600c36769c45ed4c06dd23e Mon Sep 17 00:00:00 2001
From: jasinco <jasinc90@gmail.com>
Date: Wed, 11 Jun 2025 19:05:00 +0800
Subject: [PATCH] Add ImagePreview to Fetch and set privacy policy

---
 src/Fetch.tsx           |  8 +++-----
 src/ImageWithPrview.tsx | 18 +++++++++---------
 src/Policy.tsx          |  5 +++++
 src/Zone.tsx            |  7 +++----
 4 files changed, 20 insertions(+), 18 deletions(-)
 create mode 100644 src/Policy.tsx

diff --git a/src/Fetch.tsx b/src/Fetch.tsx
index fc25db9..40cd719 100644
--- a/src/Fetch.tsx
+++ b/src/Fetch.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { FetchPost, MediaPathTrc, SinglePost_t } from "./api"
 import { z } from 'zod/v4'
 import { useInfiniteQuery } from "@tanstack/react-query"
+import ImageWithPreview from "./ImageWithPrview"
 
 // type fetched = z.infer<typeof FetchPost_t>
 
@@ -9,15 +10,12 @@ const Single = ({ post }: { post: z.infer<typeof SinglePost_t> }) => {
 	return (
 		<div className="w-full max-w-full bg-gray-200 rounded-lg shadow-md p-6 flex flex-col gap-4 snap-start">
 			<p className="text-gray-800 text-base leading-relaxed break-all whitespace-pre-wrap">{post.content}</p>
-			{post.enclosure.length > 0 && post.enclosure[0] != null && <div className="flex flex-row overflow-x-auto gap-3 py-2 -mx-2 px-2 border-t border-gray-200 pt-4">
+			{post.enclosure.length > 0 && post.enclosure[0] != null && <div className="flex flex-row overflow-x-auto gap-3 py-2 -mx-2 px-2 border-t border-gray-200 pt-4 h-32">
 				{post.enclosure.map((enc, index) => {
 					if (enc) {
-						return <img
+						return <ImageWithPreview
 							key={index}
 							src={MediaPathTrc(enc)}
-							alt={`Post media ${post.id}-${index}`}
-							loading="lazy"
-							className="rounded-md h-32 object-cover aspect-video flex-shrink-0"
 						/>
 					} else {
 						return ""
diff --git a/src/ImageWithPrview.tsx b/src/ImageWithPrview.tsx
index 4ff1039..141c455 100644
--- a/src/ImageWithPrview.tsx
+++ b/src/ImageWithPrview.tsx
@@ -5,7 +5,7 @@ const ImageWithPreview = ({
   remove,
 }: {
   src: string
-  remove: () => void
+  remove?: () => void
 }) => {
   const [show, setShow] = useState(false)
   return (
@@ -26,14 +26,14 @@ const ImageWithPreview = ({
         onClick={() => setShow(false)}
       >
         <div className="z-20 w-full md:w-fit fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 md:w-[50dvw]">
-          <img src={src} className="w-[90dvw] h-auto m-auto md:w-auto md:max-h-[80dvh]" />
-            <button
-              type="button"
-              className="mt-6 w-full py-3 bg-gray-800 text-white font-semibold rounded-lg hover:bg-gray-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed" // Consistent button styling
-              onClick={() => remove()}
-              >
-              刪除
-            </button>
+          <img src={src} className="w-[90dvw] h-auto m-auto md:w-auto md:max-h-[80dvh]" loading='lazy' />
+          {remove && <button
+            type="button"
+            className="mt-6 w-full py-3 bg-gray-800 text-white font-semibold rounded-lg hover:bg-gray-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed" // Consistent button styling
+            onClick={() => remove()}
+          >
+            刪除
+          </button>}
         </div>
       </div>
     </>
diff --git a/src/Policy.tsx b/src/Policy.tsx
new file mode 100644
index 0000000..ff31cd1
--- /dev/null
+++ b/src/Policy.tsx
@@ -0,0 +1,5 @@
+export const Policy = () => {
+	return <div className="w-full h-fit">
+		Test
+	</div>
+}
diff --git a/src/Zone.tsx b/src/Zone.tsx
index ae69878..8114728 100644
--- a/src/Zone.tsx
+++ b/src/Zone.tsx
@@ -25,13 +25,11 @@ export const Zone = ({ setZone }: { setZone: (zone_name: string) => void }) => {
 
         {/* Drawer handle/button */}
         <div className="relative">
-          {/* Visual handle indicator */}
-          <div className="w-12 h-1 bg-zinc-500 rounded-full mx-auto mt-3 mb-2" />
 
           <button
             onClick={() => setToggle(!toggle)}
             className="w-full py-3 px-6 text-white font-medium text-lg
-                     hover:bg-zinc-700 transition-colors duration-200
+                     transition-colors duration-200
                      flex items-center justify-center gap-2"
           >
             <span>選擇功能</span>
@@ -50,7 +48,7 @@ export const Zone = ({ setZone }: { setZone: (zone_name: string) => void }) => {
             {[
               { key: 'post', label: 'PO文', icon: '✏️', delay: '100ms' },
               { key: 'delete', label: '刪文', icon: '🗑️', delay: '200ms' },
-              { key: 'view', label: '查看', icon: '👁️', delay: '300ms' }
+              { key: 'view', label: '查看', icon: '👁️', delay: '300ms' },
             ].map(({ key, label, icon, delay }) => (
               <button
                 key={key}
@@ -71,6 +69,7 @@ export const Zone = ({ setZone }: { setZone: (zone_name: string) => void }) => {
                 <span>{label}</span>
               </button>
             ))}
+            <p className='text-slate-500 hover:text-gray-300 active:text-gray-200 w-fit mx-auto'>隱私政策：我們會搜集IP</p>
           </div>
         </div>
       </div>