From 5f8c7b701a4160ca50482317b2a81c37ed6e3593 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9F=9A=E5=AD=90?=
 <40852301+uiYzzi@users.noreply.github.com>
Date: Fri, 7 Mar 2025 15:44:29 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E6=B7=BB=E5=8A=A0=E6=88=AA?=
 =?UTF-8?q?=E5=9B=BE=E5=A4=A7=E5=9B=BE=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

https://git.spark-app.store/spark-store-private/spark-store/issues/3
---
 src/components/ScreenshotCarousel/index.tsx | 36 ++++++++++++++++-----
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/components/ScreenshotCarousel/index.tsx b/src/components/ScreenshotCarousel/index.tsx
index 45f77a2..2bbe606 100644
--- a/src/components/ScreenshotCarousel/index.tsx
+++ b/src/components/ScreenshotCarousel/index.tsx
@@ -1,4 +1,5 @@
-import { Component } from 'solid-js';
+import { Component, createSignal } from 'solid-js';
+import { Portal } from 'solid-js/web';
 import { Skeleton } from "@/components/ui/skeleton";
 import BaseCarousel from "@/components/ui/base-carousel";
 
@@ -11,8 +12,10 @@ interface ScreenshotCarouselProps {
 }
 
 const ScreenshotCarousel: Component<ScreenshotCarouselProps> = (props) => {
+  const [previewUrl, setPreviewUrl] = createSignal<string | null>(null);
+
   const renderItem = (screenshot: NonNullable<ScreenshotCarouselProps['screenshots']>[0]) => (
-    <div class="w-full h-full aspect-[16/9]">
+    <div class="w-full h-full aspect-[16/9] cursor-pointer" onClick={() => setPreviewUrl(screenshot.url)}>
       <img 
         src={screenshot.url} 
         alt={screenshot.title} 
@@ -28,12 +31,29 @@ const ScreenshotCarousel: Component<ScreenshotCarouselProps> = (props) => {
   );
 
   return (
-    <BaseCarousel
-      items={props.screenshots}
-      loading={props.loading}
-      renderItem={renderItem}
-      renderSkeleton={renderSkeleton}
-    />
+    <>
+      <BaseCarousel
+        items={props.screenshots}
+        loading={props.loading}
+        renderItem={renderItem}
+        renderSkeleton={renderSkeleton}
+      />
+      
+      {previewUrl() && (
+        <Portal>
+          <div 
+            class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+            onClick={() => setPreviewUrl(null)}
+          >
+            <img 
+              src={previewUrl() || undefined}
+              alt="Preview" 
+              class="max-w-[90vw] max-h-[90vh] object-contain"
+            />
+          </div>
+        </Portal>
+      )}
+    </>
   );
 };