Senither/ShareX-Media-Server

use App\Models\Url;
use Livewire\Component;

class UrlPreviewList extends Component
{
    protected $listeners = ['urlDeleted' => '$refresh'];

    public function render()
    {
        return view('url.url-preview-list', [
            'urls' => Url::latest()
                ->limit(6)
                ->get(),
        ]);
    }
}

<div class="pt-12" wire:poll.10s>
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white dark:bg-dark-gray-900 overflow-hidden shadow-xl sm:rounded-lg">
            <div class="p-6 flex items-center justify-between bg-white dark:bg-dark-gray-800 border-b border-gray-200 dark:border-dark-gray-500">
                <div class="text-xl dark:text-dark-gray-100">
                    Latest shorten URLs
                </div>

                <a href="{{ route('urls') }}">
                    <div class="flex items-center text-sm font-semibold text-indigo-700 dark:text-indigo-300">
                        <div>View all shorten URLs</div>

                        <div class="ml-1 text-indigo-500">
                            {{-- Heroicon: arrow-right --}}
                            <svg viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
                                <path fill-rule="evenodd"
                                      d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                                      clip-rule="evenodd"></path>
                            </svg>
                        </div>
                    </div>
                </a>
            </div>

            <div class="bg-gray-200 dark:bg-dark-gray-700 bg-opacity-25 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
                @if ($urls->isEmpty())
                    <x-has-no-media :type="'url'" />
                @else
                    @foreach ($urls as $url)
                        @livewire('url.url-preview', ['url' => $url], key($url->id))
                    @endforeach
                @endif
            </div>
        </div>
    </div>
</div>

use Livewire\Component;

class UrlPreview extends Component
{
    public $url;

    public function delete()
    {
        $this->url->delete();

        $this->emitUp('urlDeleted');
    }

    public function render()
    {
        return view('url.url-preview', [
            'url' => $this->url,
        ]);
    }
}

<div class="m-6 flex flex-col">
    <a class="flex flex-1" href="{{ $url->resource_url }}" target="blank">
        <div
             class="p-2 mb-1 flex flex-col w-full text-center overflow-ellipsis dark:bg-dark-gray-800 rounded shadow-md transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110">
            <img
                 class="flex flex-1"
                 loading="lazy"
                 height="256"
                 width="256"
                 src="{{ route('view-url', [$url, 'preview']) }}"
                 alt="{{ $url->name }}"
                 onerror="this.onerror=null; this.src='{{ asset('vendor/vscode-material-icon-theme/icons/url.svg') }}'">

            <p class="pt-2 text-xs dark:text-dark-gray-200">Visited {{ $url->visits }} times</p>
        </div>
    </a>

    <div
         class="p-2 mt-2 items-end grid grid-cols-2 text-center bg-white dark:bg-dark-gray-800 rounded-md border-b border-gray-200 dark:border-dark-gray-900 shadow-md divide-x dark:divide-dark-gray-500">
        <a class="hover:text-gray-500 dark:text-dark-gray-200 dark:hover:text-dark-gray-400" href="{{ $url->resource_url }}" target="blank">View</a>
        <a class="text-red-500 hover:text-red-400 cursor-pointer" wire:click="delete">Delete</a>
    </div>
</div>