maryUI

Spotlight

Give superpowers to your users and allow them to search for anything. On this example we will search only for usernames, but you can mix any type of content like other entities or even quick actions like "Create a user". Check the docs for more.

Searching

Place the spotlight tag somewhere in the main layout.

<body>
    ...
    {{--  TOAST area --}}
    <x-toast />
 
    {{-- Spotlight --}}
    <x-spotlight />  
</body>

Create an App\Support\Spotlight class with a search method that returns the result.

namespace App\Support;
 
use App\Models\User;
use Illuminate\Http\Request;
 
class Spotlight
{
    public function search(Request $request)
    {
        // Filter users by name
        // Transform the result to be compliant with Spotlight contract
        return User::query()
            ->where('name', 'like', "%$request->search%")
            ->take(5)
            ->get()
            ->map(function (User $user) {
                return [
                    'avatar' => $user->avatar ?? '/empty-user.jpg',
                    'name' => $user->name,
                    'description' => $user->email,
                    'link' => "/users/{$user->id}/edit"
                ];
            });
    }
}

That's it! You are done, try to hit Ctrl/Cmd + G

Before proceeding, we recommend that you make a local commit to keep track of what is going on.

Updating users Jetstream & Breeze

maryUI

Sponsor