created color search function

app/Livewire/Filament/Color.php

@@ -24,6 +24,8 @@ class Color extends Component
 
     public $createModal = false;
 
+    public $search ='';
+
     public function create() {
         @Auth::check();
 
@@ -52,7 +54,7 @@ class Color extends Component
     public function render()
     {
         return view('livewire.filament.color', [
-            'colors' => ColorModel::paginate(10)
+            'colors' => ColorModel::search('name', $this->search)->paginate(10)
         ]);
     }
 }

app/Providers/AppServiceProvider.php

@@ -3,6 +3,7 @@
 namespace App\Providers;
 
 use Illuminate\Support\ServiceProvider;
+use Illuminate\Database\Eloquent\Builder;
 
 class AppServiceProvider extends ServiceProvider
 {
@@ -19,6 +20,10 @@ class AppServiceProvider extends ServiceProvider
      */
     public function boot(): void
     {
-        //
+        // Search
+        Builder::macro('search', function ($field, $string) {
+            return $string ? $this->where($field, 'like', '%' . $string . '%') : $this;            
+        });
+
     }
 }

resources/views/livewire/filament/color.blade.php

@@ -2,8 +2,11 @@
     <x-header>
         {{ __('Colors') }}
 
+        <x-slot name="headerleft">
+            <input type="text" placeholder="Search..." wire:model.live="search" class="bg-zinc-800 rounded focus:border-accent focus:ring-accent" />
+        </x-slot>
+
         <x-slot name="headerright">
-            <a href="#" class="flex gap-2 hover:*:animate-spin"><flux:icon.arrow-path class="transition ease-in duration-300" />Refresh</a>
             <button type="button" x-on:click="$wire.createModal = true" class="bg-zinc-500 hover:bg-green-500 text-zinc-50 hover:text-zinc-700 font-bold text-base py-2 px-4 rounded cursor-pointer">Create</button>
         </x-slot>
     </x-header>