wip

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

@@ -0,0 +1,90 @@
+<x-filament-infolists::entry-wrapper :entry="$entry">
+    @php
+        $media = $getMedia();
+        $hasImagesOnly = $media->every(fn($m) => str_starts_with($m->mime_type, 'image/'));
+    @endphp
+
+    @if ($media->isEmpty())
+        <div class="flex items-center justify-center rounded-xl border border-dashed border-gray-200 bg-white/50 p-4 text-sm text-gray-500 dark:border-white/10 dark:bg-white/5 dark:text-gray-400">
+            {{ __('No files uploaded') }}
+        </div>
+    @elseif ($hasImagesOnly)
+        <div 
+            @class([
+                'grid gap-4',
+                'grid-cols-[repeat(auto-fill,minmax(120px,1fr))]' => $media->count() > 1,
+            ])
+        >
+            @foreach ($media as $medium)
+                <div class="relative group">
+                    <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"
+                    >
+                        <x-filament::icon
+                            icon="heroicon-m-eye"
+                            class="h-8 w-8 text-white"
+                        />
+                    </a>
+                </div>
+            @endforeach
+        </div>
+    @else
+        <div class="flex flex-col gap-3">
+            @foreach ($getMedia() as $media)
+                <div class="flex items-center gap-3 rounded-xl border border-gray-200 bg-white p-2 shadow-sm dark:border-white/10 dark:bg-white/5">
+                    <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-gray-100 dark:bg-white/10 overflow-hidden">
+                        @if (str_starts_with($media->mime_type, 'image/'))
+                            <img 
+                                src="{{ $media->hasGeneratedConversion('thumb') ? $entry->getMediaUrl($media, 'thumb') : $entry->getMediaUrl($media) }}" 
+                                alt="{{ $media->name }}" 
+                                class="h-full w-full object-cover" 
+                            />
+                        @else
+                            <div class="flex h-full w-full items-center justify-center bg-white dark:bg-gray-800">
+                                <x-filament::icon
+                                    icon="heroicon-o-document"
+                                    class="h-6 w-6 text-gray-500 dark:text-gray-400"
+                                />
+                            </div>
+                        @endif
+                    </div>
+
+                    <div class="flex-grow overflow-hidden">
+                        <p class="truncate text-sm font-medium text-gray-950 dark:text-white" title="{{ $media->name }}">
+                            {{ $media->name }}
+                        </p>
+                        <p class="text-xs text-gray-500 dark:text-gray-400">
+                            {{ $media->human_readable_size }} 
+                            <span class="text-gray-300 dark:text-gray-600 px-1">•</span> 
+                            <span class="uppercase">{{ $media->extension }}</span>
+                        </p>
+                    </div>
+
+                    <div class="flex shrink-0 items-center gap-2 pr-2">
+                        @if ($isPreviewable())
+                            <a 
+                                href="{{ $entry->getMediaUrl($media) }}" 
+                                target="_blank" 
+                                rel="noopener noreferrer"
+                                class="flex items-center justify-center h-8 w-8 rounded-full hover:bg-gray-50 dark:hover:bg-white/10 text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-500 transition-colors"
+                                title="{{ __('View') }}"
+                            >
+                                <x-filament::icon
+                                    icon="heroicon-m-eye"
+                                    class="h-5 w-5"
+                                />
+                            </a>
+                        @endif
+                    </div>
+                </div>
+            @endforeach
+        </div>
+    @endif
+</x-filament-infolists::entry-wrapper>