A custom Livewire component to use on Filament 4 to search imagens from Pexels.

PexelsImagesSearch.php

<?php

namespace App\Livewire\Filament;

use App\Models\Post;
use Livewire\Component;
use Filament\Tables\Table;
use Filament\Actions\Action;
use Illuminate\Support\Facades\Http;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Columns\ImageColumn;
use Filament\Tables\Columns\Layout\Stack;
use Illuminate\Database\Eloquent\Builder;
use Filament\Actions\Contracts\HasActions;
use Filament\Schemas\Contracts\HasSchemas;
use Filament\Schemas\Components\Utilities\Get;
use Filament\Schemas\Components\Utilities\Set;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Livewire\Attributes\Modelable;

class PexelsImagesSearch extends Component implements HasActions, HasSchemas, HasTable
{
    use InteractsWithActions;
    use InteractsWithSchemas;
    use InteractsWithTable;

    #[Modelable]
    public $selectedImage = null;

    public function table(Table $table): Table
    {
        return $table
            ->recordClasses(fn ($record) => [
                'bg-gray-950' => $record['large'] == $this->selectedImage
            ])
            ->searchPlaceholder('ex: empresário')
            ->emptyStateDescription('Digite um termo de pesquisa para encontrar a sua imagem')
            ->emptyStateHeading('Ops! Nada por aqui.')
            ->records(function (?string $search) {

                if (blank($search)) return [];

                $url = 'https://api.pexels.com/v1/search';

                $params = [
                    'query'    => $search,
                    'per_page' => 12,
                    'locale'   => 'pt-br',
                    'orientation' => 'landscape',
                ];

                $result = Http::withToken(config('pexels.api_token'), '')
                    ->get($url, $params)
                    ->json('photos.*.src');


                return $result;
            })
            ->contentGrid(['lg' => 3])
            ->columns([
                Stack::make([
                    ImageColumn::make('medium')
                        ->extraImgAttributes(['class' => 'rounded-lg'])
                        ->searchable()
                        ->imageWidth('100%')
                        ->imageHeight('10em'),
                ])
            ])
            ->filters([
                // ...
            ])
            ->recordActions([

                Action::make('selecionar')
                    ->link()
                    ->action(function ($record) {
                        $this->selectedImage = $record['large'];
                    }),
            ])
            ->toolbarActions([
                // ...
            ]);
    }

    public function render()
    {
        return view('livewire.filament.pexels-images-search');
    }
}