WIP

resources/views/livewire/category-filter.blade.php

@@ -0,0 +1,31 @@
+<div class="p-2 mt-8">
+    <div class="text-center">
+        <ul class="uppercase font-medium">
+            <x-category-filter-pill wire:click="setFilter(-1)" :active="$filter == null">
+                Alle
+            </x-category-filter-pill>
+
+            @foreach ($tags as $tag)
+                <x-category-filter-pill :key="$tag->id" wire:click="setFilter({{ $tag->id }})" :active="$tag->id == $filter?->id">
+                    {{ $tag->title }}
+                </x-category-filter-pill>
+            @endforeach
+        </ul>
+    </div>
+
+    <div class="m-8 flex flex-wrap flex-row gap-4">
+        @foreach ($categories as $category)
+            @if($filter == null || $category->tags->contains($filter))
+                <figure wire:transition wire:key="{{ $category->id }}" class="relative rounded-lg cursor-pointer h-80 flex-grow overflow-hidden">
+                    <a href="{{ route('category.show', $category) }}">
+                        <img class="max-h-full min-w-full align-bottom object-cover"
+                         src="{{ url($category->cover) }}" alt="{{ $category->name }} Cover">
+                        <figcaption class="absolute p-4 text-lg text-white top-1/2 bottom-0 bg-opacity-20 min-w-full bg-gradient-to-b from-transparent to-slate-900 flex flex-col-reverse">
+                            <span>{{ $category->name }}</span>
+                        </figcaption>
+                    </a>
+                </figure>
+            @endif
+        @endforeach
+    </div>
+</div>