91 lines
4.5 KiB
PHP
91 lines
4.5 KiB
PHP
<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>
|