feat: Active Search for skins

app/Http/Controllers/ChampionSkinController.php

@@ -8,13 +8,14 @@ use App\Models\ChampionSkin;
 use Illuminate\Support\Facades\Cache;
 use Spatie\QueryBuilder\AllowedFilter;
 use Spatie\QueryBuilder\QueryBuilder;
+use Illuminate\Http\Request;
 
 class ChampionSkinController extends Controller
 {
     /**
      * Display a listing of the resource.
      */
-    public function index()
+    public function index(Request $request)
     {
         $skins = QueryBuilder::for(ChampionSkin::class)
             ->allowedFilters(AllowedFilter::partial('name', 'skin_name'), 'rarity')
@@ -31,7 +32,7 @@ class ChampionSkinController extends Controller
             'Transcendent' => 'text-violet-400',
         ];
 
-        return view('skins.index', ['skins' => $skins, 'rarityColor' => $rarityColor]);
+        return view('skins.index', ['skins' => $skins, 'rarityColor' => $rarityColor])->fragmentIf($request->hasHeader('HX-Request'), 'skin-list');
     }
 
     /**

resources/css/app.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+@view-transition {
+    navigation: auto; /* enabled! */
+}
+
 @font-face {
     font-display: swap;
     font-family: "Inter";

resources/views/components/skins/paginatedlist.blade.php

@@ -8,12 +8,10 @@
         Champion Skins</h1>
     <x-skins.searchbar />
 
-    <div class="flex justify-center items-center mx-auto max-w-screen-xl mt-2.5">
-    </div>
-
-    <div class="container flex items-center justify-center p-4 mx-auto mt-3">
+    @fragment('skin-list')
+        <div id="skin-list">
+            <div class="container flex items-center justify-center p-4 mx-auto mt-3" >
                 <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-4">
-
                     @foreach ($skins as $key => $skin)
                         <div
                             class="flex flex-col text-gray-700 border shadow-md champ-card bg-stone-800/40 rounded-2xl bg-clip-border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10">
@@ -50,7 +48,8 @@
                             </div>
 
                             <div class="flex items-end justify-center px-4 mt-auto mb-2 text-2xl text-white md:text-lg">
-                        <p class="text-sm font-medium hover:text-orange-400"><a href="/skin/{{ $skin->slug }}">More
+                                <p class="text-sm font-medium hover:text-orange-400"><a
+                                        href="/skin/{{ $skin->slug }}">More
                                         details
                                         <x-iconsax-bul-arrow-circle-right class="inline-block w-6" />
                                     </a>
@@ -61,5 +60,7 @@
                 </div>
             </div>
             {{ $skins->links() }}
+        </div>
+    @endfragment
 
 </section>

resources/views/components/skins/searchbar.blade.php

@@ -1,20 +1,16 @@
+<script src="https://unpkg.com/htmx.org@2.0.0"></script>
 <div class="flex items-center justify-center mt-8">
-    <form action="{{ route('skins.index') }}" method="GET" class="flex" id="searchForm">
+    <form  method="GET" class="flex" id="searchForm">
         <div class="relative">
-            <input type="text" name="filter[name]" placeholder="Search by skin name"
-                   value="{{ request('filter.name') }}"
-                   class="border border-transparent focus:border-transparent focus:ring-0 border-stone-700 rounded-l px-4 py-2 bg-stone-800 text-white ring-orange-500 pr-10">
+            <input hx-get="{{ route('skins.index') }}" hx-trigger="keyup changed delay:100ms" hx-target="#skin-list" hx-swap-oob="true" type="text" name="filter[name]" placeholder="Search by skin name" value="{{ request('filter.name') }}"
+                class="px-4 py-2 pr-10 text-white border border-transparent rounded shadow-md focus:border-transparent focus:ring-0 border-stone-700 bg-stone-800 ring-orange-500">
             @if (request('filter.name'))
                 <button type="button" onclick="clearSearchAndSubmit()"
-                        class="absolute inset-y-0 right-0 flex items-center px-3 bg-stone-800 text-white cursor-pointer">
-                    <x-iconsax-lin-clipboard-close class="w-6 text-white"/>
+                    class="absolute inset-y-0 right-0 flex items-center px-3 text-white cursor-pointer bg-stone-800">
+                    <x-iconsax-lin-clipboard-close class="w-6 text-white" />
                 </button>
             @endif
         </div>
-        <button type="submit"
-                class="bg-orange-500 hover:bg-orange-600 text-white font-semibold px-4 py-2 rounded-r focus:outline-none ring-orange-500">
-            Search
-        </button>
     </form>
 </div>
 <script>

routes/web.php

@@ -44,7 +44,7 @@ Route::get('roadmap', static fn () => (new HomeController())->roadmap())->name('
 Route::get('champions', static fn () => (new ChampionController())->index())->name('champions.index');
 Route::get('champion/{champion}', static fn (Champion $champion) => (new ChampionController())->show($champion))->name('champions.show');
 // Skins
-Route::get('skins', static fn () => (new ChampionSkinController())->index())->name('skins.index');
+Route::get('skins', static fn (Request $request) => (new ChampionSkinController())->index($request))->name('skins.index');
 Route::get('skin/{championSkin}', static fn (ChampionSkin $championSkin) => (new ChampionSkinController())->show($championSkin))->name('skins.show');
 
 // Icons