WIP

resources/views/album/show.blade.php

@@ -28,27 +28,7 @@
     @if($album->mutations->count() > 0)
         <livewire:drawer.album.progress-monitor :mutation="$album->mutations->first()"/>
     @else
-        <div id="album" class="m-8 flex flex-wrap flex-row gap-4">
-            @foreach ($album->images as $image)
-                <a 
-                    class="relative group rounded-lg cursor-pointer h-80 flex-grow overflow-hidden" 
-                    href="{{ $image->lightbox['location'] }}"
-                    data-pswp-width="{{ $image->lightbox['width'] }}"
-                    data-pswp-download="{{ $image->getDownload() }}"
-                    data-pswp-height="{{ $image->lightbox['height'] }}"
-                    data-cropped="true"
-                >
-                    <img class="max-h-full min-w-full align-bottom object-cover"
-                     src="{{ $image->getThumbnail() }}" alt="{{ $album->name }} Bild">
-                    <div class="opacity-0 group-hover:opacity-40 absolute inset-0 w-full h-full bg-black flex items-center justify-center transition-opacity">
-                        <svg class="w-1/2 h-1/2 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                          <path stroke="currentColor" stroke-width="2" d="M21 12c0 1.2-4.03 6-9 6s-9-4.8-9-6c0-1.2 4.03-6 9-6s9 4.8 9 6Z"/>
-                          <path stroke="currentColor" stroke-width="2" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
-                        </svg>              
-                    </div>
-                </a>
-            @endforeach
-        </div>
+        <livewire:image.grid :images="$album->images"></livewire:image.grid>
         <x-drawer name="image-add" >
             <x-slot:title>Neue Bilder zu {{ $album->name }} hinzufügen</x-slot:title>
             <x-slot:content>

resources/views/category/show.blade.php

@@ -20,7 +20,7 @@
     </div>
 @endpush
 
-<x-layout>
+<x-layouts.app>
     <x-hero-search></x-hero-search>
     <h1 class="mb-4 mx-8 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
         {{ $category->name }}
@@ -50,4 +50,4 @@
             <livewire:drawer.album.create></livewire:drawer.album.create>
         </x-slot:content>
     </x-drawer>
-</x-layout>
+</x-layouts.app>

resources/views/welcome.blade.php

@@ -1,5 +1,5 @@
-<x-layout>
+<x-layouts.app>
     <x-hero-search></x-hero-search>
 
     <livewire:category-filter />
-</x-layout>
+</x-layouts.app>