wip

resources/views/filament/infolists/components/image-modal.blade.php

@@ -0,0 +1,3 @@
+<div class="flex justify-center items-center w-full h-full">
+    <img src="{{ $url }}" class="max-w-full max-h-[80vh] object-contain rounded-lg shadow-lg" alt="Preview" />
+</div>

resources/views/filament/infolists/components/spatie-media-library-file-entry.blade.php

@@ -16,23 +16,30 @@
             ])
         >
             @foreach ($media as $medium)
-                <div class="relative group">
+                <div class="flex flex-col items-center gap-2">
                     <img 
                         src="{{ $entry->getMediaUrl($medium, $media->count() > 1 ? 'thumb' : null) }}" 
                         class="w-full rounded-lg"
                     />
-                    <a 
-                        href="{{ $entry->getMediaUrl($medium) }}" 
-                        target="_blank" 
-                        rel="noopener noreferrer"
-                        class="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg"
+                    <button 
+                        type="button"
+                        class="text-sm font-medium text-primary-600 decoration-2 center underline focus:outline-none dark:text-primary-500"
+                        @click="$dispatch('open-modal', { id: 'preview-image' })"
                     >
-                        <x-filament::icon
-                            icon="heroicon-m-eye"
-                            class="h-8 w-8 text-white"
-                        />
-                    </a>
-                </div>
+                        {{ __('Watch Full') }}
+                    </button>
+                </div>  
+
+                <x-filament::modal id="preview-image" width="5xl" :close-button="true">
+                    <x-slot name="heading">
+                        {{ $getLabel() }}
+                    </x-slot>
+
+                    <img 
+                        src="{{ $entry->getMediaUrl($medium) }}" 
+                        class="w-full h-full object-contain"
+                    />
+                </x-filament::modal>
             @endforeach
         </div>
     @else