feat: search through skins

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

@@ -6,6 +6,8 @@
         class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl
         bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
         Champion Skins</h2>
+    <x-skins.searchbar/>
+
     <div class="flex justify-center items-center mx-auto max-w-screen-xl mt-2.5">
     </div>
 

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

@@ -0,0 +1,25 @@
+<div class="flex items-center justify-center mt-8 ">
+    <form action="{{ route('skins.index') }}" 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">
+            @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"/>
+                </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>
+    function clearSearchAndSubmit() {
+        document.querySelector('input[name="filter[name]"]').value = '';
+        document.getElementById('searchForm').submit();
+    }
+</script>