w33b/hstream
1
0
Fork 1
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Update filter modal designs & Refactor code

Browse Source
This commit is contained in:
w33b
2026-05-23 00:01:02 +02:00
parent 6d3de59929
commit 72263127df
4 changed files with 372 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
app/Helpers/FilterCategories.php Normal file
View File

@@ -0,0 +1,102 @@
<?php
namespace App\Helpers;
use Illuminate\Support\Str;
use Illuminate\Support\Facades\Cache;
use Conner\Tagging\Model\Tag;
class FilterCategories
{
public static function getFilterCategories()
{
$taglist = cache()->remember(
'searchtags',
300,
fn () => Tag::where('count', '>', 0)
->orderBy('slug')
->get(),
);
$appearances = [
'Loli',
'Shota',
'Milf',
'Futanari',
'Big Boobs',
'Small Boobs',
'Dark Skin',
'Cosplay',
'Elf',
'Maid',
'Nekomimi',
'Nurse',
'School Girl',
'Succubus',
'Teacher',
'Trap',
'Pregnant',
'Glasses',
'Swim Suit',
'Ugly Bastard',
'Monster',
];
$types = [
'3D',
'4K',
'48Fps',
'4K 48Fps',
'Censored',
'Uncensored',
'Comedy',
'Fantasy',
'Horror',
'Vanilla',
'Ntr',
'Pov',
'Filmed',
'X-Ray',
];
$actions = [
'Anal',
'Bdsm',
'Facial',
'Blow Job',
'Boob Job',
'Foot Job',
'Hand Job',
'Rimjob',
'Inflation',
'Masturbation',
'Public Sex',
'Rape',
'Reverse Rape',
'Threesome',
'Orgy',
'Gangbang',
];
$excluded = [...$appearances, ...$types, ...$actions];
$categories = [
'Genres' => $taglist
->reject(fn ($tag) => in_array($tag->name, $excluded))
->pluck('name')
->toArray(),
'Actions' => $actions,
'Appearance' => collect($appearances)
->reject(function ($tag) {
return auth()->guest() && in_array($tag, ['Loli', 'Shota']);
})
->toArray(),
'Types' => $types,
];
return $categories;
}
}

238
resources/views/modals/filter-blacklist.blade.php
View File

@@ -1,165 +1,107 @@
<!--Verically centered modal-->
<div data-te-modal-init
class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
id="modalBlacklist" tabindex="-1" aria-labelledby="modalBlacklist" aria-modal="true" role="dialog">
<div data-te-modal-dialog-ref
class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%] 2xl:min-[576px]:max-w-[60%]">
<div <div
class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800"> data-te-modal-init
<x-modal-header :title="__('Blacklist')" /> id="modalBlacklist"
tabindex="-1"
aria-labelledby="modalBlacklistLabel"
aria-modal="true"
role="dialog"
class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
>
<div
data-te-modal-dialog-ref
class="flex min-h-screen items-center justify-center p-4"
>
<div
class="relative w-full max-w-6xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900"
>
<!-- Header -->
<div class="sticky top-0 z-10 flex items-center justify-between border-b border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
<div>
<h2
id="modalGenresLabel"
class="text-xl font-semibold text-neutral-900 dark:text-white"
>
Genres & Filters
</h2>
<!--Modal body--> <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
<div class="relative p-4"> Select tags to blacklist from your content.
</p>
</div>
<button
type="button"
data-te-modal-dismiss
wire:click="revertFilters"
class="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white"
>
✕
</button>
</div>
<!-- Body -->
<form class="max-h-[75vh] overflow-y-auto">
<div class="space-y-8 p-6">
@foreach (\App\Helpers\FilterCategories::getFilterCategories() as $section => $items)
<section>
<div class="mb-4 flex items-center justify-between">
<h3 class="text-lg font-semibold text-neutral-800 dark:text-white">
{{ $section }}
</h3>
<div class="h-px flex-1 bg-neutral-200 ml-4 dark:bg-neutral-700"></div>
</div>
<div class="flex flex-wrap gap-3">
@foreach ($items as $tag)
@php @php
$taglist = \cache()->remember( $slug = Str::slug($tag);
'searchtags',
300,
fn() => Conner\Tagging\Model\Tag::where('count', '>', 0)->orderBy('slug', 'ASC')->get(),
);
$appearances = [
'Loli',
'Shota',
'Milf',
'Futanari',
'Big Boobs',
'Small Boobs',
'Dark Skin',
'Cosplay',
'Elf',
'Maid',
'Nekomimi',
'Nurse',
'School Girl',
'Succubus',
'Teacher',
'Trap',
'Pregnant',
'Glasses',
'Swim Suit',
'Ugly Bastard',
'Monster',
];
$types = [
'3D',
'4K',
'48Fps',
'4K 48Fps',
'Censored',
'Uncensored',
'Comedy',
'Fantasy',
'Horror',
'Vanilla',
'Ntr',
'Pov',
'Filmed',
'X-Ray',
];
$actions = [
'Anal',
'Bdsm',
'Facial',
'Blow Job',
'Boob Job',
'Foot Job',
'Hand Job',
'Rimjob',
'Inflation',
'Masturbation',
'Public Sex',
'Rape',
'Reverse Rape',
'Threesome',
'Orgy',
'Gangbang',
];
@endphp @endphp
<ul class="list-none text-justify" style="overflow: hidden;"> <div>
@foreach ($taglist as $tag) <input
@if (in_array($tag->name, $types) || in_array($tag->name, $appearances) || in_array($tag->name, $actions)) wire:model="blacklist"
@continue type="checkbox"
@endif id="blacklist-{{ $slug }}"
<li class="inline-block m-1"> name="blacklist[]"
<input class="m-5 hidden peer" wire:model="blacklist" type="checkbox" value="{{ $slug }}"
id="blacklist-{{ $tag->slug }}" name="blacklist[]" value="{{ $tag->slug }}"> class="peer hidden"
<label >
class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
for="blacklist-{{ $tag->slug }}">{{ $tag->name }}</label>
</li>
@endforeach
</ul>
<br>
<!-- Actions -->
<p class="font-medium leading-normal text-neutral-800 dark:text-white">
Action
</p>
<ul class="list-none text-justify" style="overflow: hidden;">
@foreach ($actions as $tag)
<li class="inline-block m-1">
@php $slug = Illuminate\Support\Str::slug($tag); @endphp
<input class="m-5 hidden peer" wire:model="blacklist" type="checkbox"
id="blacklist-{{ $slug }}" name="blacklist[]" value="{{ $slug }}">
<label <label
class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none" for="blacklist-{{ $slug }}"
for="blacklist-{{ $slug }}">{{ $tag }}</label> class="inline-flex cursor-pointer items-center rounded-full border border-neutral-300 bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-700 transition-all duration-200 hover:border-rose-400 hover:bg-rose-50 hover:text-rose-600 peer-checked:border-rose-600 peer-checked:bg-rose-600 peer-checked:text-white dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:border-rose-500 dark:hover:bg-neutral-700"
</li> >
{{ $tag }}
</label>
</div>
@endforeach @endforeach
</ul> </div>
</section>
<br>
<!-- Character Appearance -->
<p class="font-medium leading-normal text-neutral-800 dark:text-white">
Appearance
</p>
<ul class="list-none text-justify" style="overflow: hidden;">
@foreach ($appearances as $tag)
@guest
@php if ($tag === "Loli" || $tag === "Shota") continue; @endphp
@endguest
<li class="inline-block m-1">
@php $slug = Illuminate\Support\Str::slug($tag); @endphp
<input class="m-5 hidden peer" wire:model="blacklist" type="checkbox"
id="blacklist-{{ $slug }}" name="blacklist[]" value="{{ $slug }}">
<label
class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
for="blacklist-{{ $slug }}">{{ $tag }}</label>
</li>
@endforeach @endforeach
</ul>
<br>
<!-- Video Types -->
<p class="font-medium leading-normal text-neutral-800 dark:text-white">
Type
</p>
<ul class="list-none text-justify" style="overflow: hidden;">
@foreach ($types as $tag)
<li class="inline-block m-1">
@php $slug = Illuminate\Support\Str::slug($tag); @endphp
<input class="m-5 hidden peer" wire:model="blacklist" type="checkbox"
id="blacklist-{{ $slug }}" name="blacklist[]" value="{{ $slug }}">
<label
class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
for="blacklist-{{ $slug }}">{{ $tag }}</label>
</li>
@endforeach
</ul>
</div> </div>
<!--Modal footer--> <!-- Footer -->
<div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4"> <div class="sticky bottom-0 flex items-center justify-end gap-3 border-t border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
<button data-te-modal-dismiss wire:click="revertFilters" type="button" <button
class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"> type="button"
Close data-te-modal-dismiss
wire:click="revertFilters"
class="rounded-xl border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800"
>
Cancel
</button> </button>
<button data-te-modal-dismiss wire:click="applyFilters" type="button"
class="ml-1 inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600"> <button
Apply type="button"
data-te-modal-dismiss
wire:click="applyFilters"
class="rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
>
Apply Filters
</button> </button>
</div> </div>
</form>
</div> </div>
</div> </div>
</div> </div>

244
resources/views/modals/filter-genres.blade.php
View File

@@ -1,163 +1,99 @@
<!--Verically centered modal-->
<div data-te-modal-init
class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
id="modalGenres" tabindex="-1" aria-labelledby="modalGenres" aria-modal="true" role="dialog">
<div data-te-modal-dialog-ref
class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%] 2xl:min-[576px]:max-w-[60%]">
<div <div
class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800"> data-te-modal-init
<x-modal-header :title="__('Genres')" /> id="modalGenres"
<form> tabindex="-1"
<!--Modal body--> aria-labelledby="modalGenresLabel"
<div class="relative p-4"> aria-modal="true"
@php role="dialog"
$taglist = cache()->remember( class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
'searchtags', >
300, <div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
fn() => Conner\Tagging\Model\Tag::where('count', '>', 0)->orderBy('slug', 'ASC')->get(), <div class="relative w-full max-w-6xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
); <!-- Header -->
$appearances = [ <div class="sticky top-0 z-10 flex items-center justify-between border-b border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
'Loli', <div>
'Shota', <h2
'Milf', id="modalGenresLabel"
'Futanari', class="text-xl font-semibold text-neutral-900 dark:text-white"
'Big Boobs', >
'Small Boobs', Genres & Filters
'Dark Skin', </h2>
'Cosplay',
'Elf',
'Maid',
'Nekomimi',
'Nurse',
'School Girl',
'Succubus',
'Teacher',
'Trap',
'Pregnant',
'Glasses',
'Swim Suit',
'Ugly Bastard',
'Monster',
];
$types = [
'3D',
'4K',
'48Fps',
'4K 48Fps',
'Censored',
'Uncensored',
'Comedy',
'Fantasy',
'Horror',
'Vanilla',
'Ntr',
'Pov',
'Filmed',
'X-Ray',
];
$actions = [
'Anal',
'Bdsm',
'Facial',
'Blow Job',
'Boob Job',
'Foot Job',
'Hand Job',
'Rimjob',
'Inflation',
'Masturbation',
'Public Sex',
'Rape',
'Reverse Rape',
'Threesome',
'Orgy',
'Gangbang',
];
@endphp
<ul class="list-none text-justify" style="overflow: hidden;"> <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
@foreach ($taglist as $tag) Select tags to filter your content.
@if (in_array($tag->name, $types) || in_array($tag->name, $appearances) || in_array($tag->name, $actions))
@continue
@endif
<li class="inline-block m-1">
<input class="m-5 hidden peer" wire:model="tags" type="checkbox"
id="tags-{{ $tag->slug }}" name="tags[]" value="{{ $tag->slug }}">
<label
class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
for="tags-{{ $tag->slug }}">{{ $tag->name }}</label>
</li>
@endforeach
</ul>
<br>
<!-- Actions -->
<p class="font-medium leading-normal text-neutral-800 dark:text-white">
Action
</p> </p>
<ul class="list-none text-justify" style="overflow: hidden;">
@foreach ($actions as $tag)
<li class="inline-block m-1">
@php $slug = Illuminate\Support\Str::slug($tag); @endphp
<input class="m-5 hidden peer" wire:model="tags" type="checkbox"
id="tags-{{ $slug }}" name="tags[]" value="{{ $slug }}">
<label
class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
for="tags-{{ $slug }}">{{ $tag }}</label>
</li>
@endforeach
</ul>
<br>
<!-- Character Appearance -->
<p class="font-medium leading-normal text-neutral-800 dark:text-white">
Appearance
</p>
<ul class="list-none text-justify" style="overflow: hidden;">
@foreach ($appearances as $tag)
@guest
@php if ($tag === "Loli" || $tag === "Shota") continue; @endphp
@endguest
<li class="inline-block m-1">
@php $slug = Illuminate\Support\Str::slug($tag); @endphp
<input class="m-5 hidden peer" wire:model="tags" type="checkbox"
id="tags-{{ $slug }}" name="tags[]" value="{{ $slug }}">
<label
class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
for="tags-{{ $slug }}">{{ $tag }}</label>
</li>
@endforeach
</ul>
<br>
<!-- Video Types -->
<p class="font-medium leading-normal text-neutral-800 dark:text-white">
Type
</p>
<ul class="list-none text-justify" style="overflow: hidden;">
@foreach ($types as $tag)
<li class="inline-block m-1">
@php $slug = Illuminate\Support\Str::slug($tag); @endphp
<input class="m-5 hidden peer" wire:model="tags" type="checkbox"
id="tags-{{ $slug }}" name="tags[]" value="{{ $slug }}">
<label
class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
for="tags-{{ $slug }}">{{ $tag }}</label>
</li>
@endforeach
</ul>
</div> </div>
<!--Modal footer--> <button
<div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4"> type="button"
<button data-te-modal-dismiss wire:click="revertFilters" type="button" data-te-modal-dismiss
class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"> wire:click="revertFilters"
Close class="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white"
>
✕
</button> </button>
<button data-te-modal-dismiss wire:click="applyFilters" type="button" </div>
class="ml-1 inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
Apply <!-- Body -->
<form class="max-h-[75vh] overflow-y-auto">
<div class="space-y-8 p-6">
@foreach (\App\Helpers\FilterCategories::getFilterCategories() as $section => $items)
<section>
<div class="mb-4 flex items-center justify-between">
<h3 class="text-lg font-semibold text-neutral-800 dark:text-white">
{{ $section }}
</h3>
<div class="h-px flex-1 bg-neutral-200 ml-4 dark:bg-neutral-700"></div>
</div>
<div class="flex flex-wrap gap-3">
@foreach ($items as $tag)
@php
$slug = Str::slug($tag);
@endphp
<div>
<input
wire:model="tags"
type="checkbox"
id="tags-{{ $slug }}"
name="tags[]"
value="{{ $slug }}"
class="peer hidden"
>
<label
for="tags-{{ $slug }}"
class="inline-flex cursor-pointer items-center rounded-full border border-neutral-300 bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-700 transition-all duration-200 hover:border-rose-400 hover:bg-rose-50 hover:text-rose-600 peer-checked:border-rose-600 peer-checked:bg-rose-600 peer-checked:text-white dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:border-rose-500 dark:hover:bg-neutral-700"
>
{{ $tag }}
</label>
</div>
@endforeach
</div>
</section>
@endforeach
</div>
<!-- Footer -->
<div class="sticky bottom-0 flex items-center justify-end gap-3 border-t border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
<button
type="button"
data-te-modal-dismiss
wire:click="revertFilters"
class="rounded-xl border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800"
>
Cancel
</button>
<button
type="button"
data-te-modal-dismiss
wire:click="applyFilters"
class="rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
>
Apply Filters
</button> </button>
</div> </div>
</form> </form>

98
resources/views/modals/filter-studios.blade.php
View File

@@ -1,40 +1,86 @@
<!--Verically centered modal-->
<div data-te-modal-init
class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
id="modalStudios" tabindex="-1" aria-labelledby="modalStudios" aria-modal="true" role="dialog">
<div data-te-modal-dialog-ref
class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%] 2xl:min-[576px]:max-w-[60%]">
<div <div
class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800"> data-te-modal-init
<x-modal-header :title="__('Studios')" /> id="modalStudios"
tabindex="-1"
aria-labelledby="modalStudios"
aria-modal="true"
role="dialog"
class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
>
<div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
<div class="relative w-full max-w-6xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
<!-- Header -->
<div class="sticky top-0 z-10 flex items-center justify-between border-b border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
<div>
<h2
id="modalGenresLabel"
class="text-xl font-semibold text-neutral-900 dark:text-white"
>
Studios
</h2>
<!--Modal body--> <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
<div class="relative p-4"> Select studios to filter your content.
<ul class="list-none text-justify" style="overflow: hidden;"> </p>
</div>
<button
type="button"
data-te-modal-dismiss
wire:click="revertFilters"
class="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white"
>
✕
</button>
</div>
<!-- Body -->
<form class="max-h-[75vh] overflow-y-auto">
<div class="space-y-8 p-6">
@php $studios = \cache()->remember('searchstudios', 300, fn () => App\Models\Studios::orderBy('name', 'ASC')->get()); @endphp @php $studios = \cache()->remember('searchstudios', 300, fn () => App\Models\Studios::orderBy('name', 'ASC')->get()); @endphp
<div class="flex flex-wrap gap-3">
@foreach ($studios as $studio) @foreach ($studios as $studio)
<li class="inline-block m-1"> <div>
<input class="m-5 hidden peer" wire:model="studios" type="checkbox" <input
id="studio-{{ $studio->slug }}" name="studios[]" value="{{ $studio->slug }}"> wire:model="studios"
type="checkbox"
id="studio-{{ $studio->slug }}"
name="studios[]"
value="{{ $studio->slug }}"
class="m-5 hidden peer"
>
<label <label
class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none" for="studio-{{ $studio->slug }}"
for="studio-{{ $studio->slug }}">{{ $studio->name }}</label> class="inline-flex cursor-pointer items-center rounded-full border border-neutral-300 bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-700 transition-all duration-200 hover:border-rose-400 hover:bg-rose-50 hover:text-rose-600 peer-checked:border-rose-600 peer-checked:bg-rose-600 peer-checked:text-white dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:border-rose-500 dark:hover:bg-neutral-700"
</li> >
{{ $studio->name }}
</label>
</div>
@endforeach @endforeach
</ul> </div>
</div> </div>
<!--Modal footer--> <!-- Footer -->
<div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4"> <div class="sticky bottom-0 flex items-center justify-end gap-3 border-t border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
<button data-te-modal-dismiss wire:click="revertFilters" type="button" <button
class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"> type="button"
Close data-te-modal-dismiss
wire:click="revertFilters"
class="rounded-xl border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800"
>
Cancel
</button> </button>
<button data-te-modal-dismiss wire:click="applyFilters" type="button"
class="ml-1 inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600"> <button
Apply type="button"
data-te-modal-dismiss
wire:click="applyFilters"
class="rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
>
Apply Filters
</button> </button>
</div> </div>
</form>
</div> </div>
</div> </div>
</div> </div>