feat: add full-size preview modal with magnifying glass button to gallery cards

Author: matthewjberger

site/src/components/gallery_examples.rs

@@ -10,6 +10,8 @@ pub struct Example {
 
 #[component]
 pub fn GalleryExamples() -> impl IntoView {
+    let (preview_image, set_preview_image) = signal::<Option<String>>(None);
+
     let examples = vec![
         Example {
             name: "3D Picking",
@@ -87,31 +89,78 @@ pub fn GalleryExamples() -> impl IntoView {
 
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                     {examples.into_iter().map(|example| {
+                        let screenshot = example.screenshot.to_string();
+                        let screenshot_for_preview = screenshot.clone();
                         view! {
-                            <a
-                                href=example.path
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                class="block bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all hover:scale-105 cursor-pointer flex flex-col"
-                            >
-                                <img
-                                    src=example.screenshot
-                                    alt=example.name
-                                    class="w-full h-48 object-cover"
-                                />
-                                <div class="p-6 flex-1">
+                            <div class="block bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all hover:scale-105 flex flex-col">
+                                <div class="relative">
+                                    <a
+                                        href=example.path
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                    >
+                                        <img
+                                            src=example.screenshot
+                                            alt=example.name
+                                            class="w-full h-48 object-contain bg-gray-100 dark:bg-gray-700"
+                                        />
+                                    </a>
+                                    <button
+                                        on:click=move |e| {
+                                            e.prevent_default();
+                                            e.stop_propagation();
+                                            set_preview_image.set(Some(screenshot_for_preview.clone()));
+                                        }
+                                        class="absolute top-2 right-2 p-2 bg-white dark:bg-gray-700 rounded-full shadow-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
+                                        title="View full size"
+                                    >
+                                        <svg class="w-5 h-5 text-gray-700 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"/>
+                                        </svg>
+                                    </button>
+                                </div>
+                                <a
+                                    href=example.path
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    class="p-6 flex-1 cursor-pointer"
+                                >
                                     <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-3">
                                         {example.name}
                                     </h3>
                                     <p class="text-gray-600 dark:text-gray-300">
                                         {example.description}
                                     </p>
-                                </div>
-                            </a>
+                                </a>
+                            </div>
                         }
                     }).collect_view()}
                 </div>
             </div>
+
+            <Show when=move || preview_image.get().is_some()>
+                <div
+                    class="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4"
+                    on:click=move |_| set_preview_image.set(None)
+                >
+                    <div
+                        class="relative max-w-7xl max-h-full"
+                        on:click=move |e| e.stop_propagation()
+                    >
+                        <button
+                            on:click=move |_| set_preview_image.set(None)
+                            class="absolute top-4 right-4 text-white hover:text-gray-300 text-4xl font-bold z-10 bg-black bg-opacity-50 rounded-full w-12 h-12 flex items-center justify-center leading-none"
+                        >
+                            "×"
+                        </button>
+                        <img
+                            src=move || preview_image.get().unwrap_or_default()
+                            class="max-w-full max-h-screen object-contain"
+                            alt="Preview"
+                        />
+                    </div>
+                </div>
+            </Show>
         </section>
     }
 }