Search Toolbar code

@props([
    'action',
    'searchName' => 'search',
    'searchValue' => null,
    'searchPlaceholder' => 'Search...',
    'clearHref' => null,
    'ajax' => false,
])

@php
    /*
    | Compact GET search form with submit and optional clear action.
    |
    | Usage:
    |   <x-ui.search-toolbar
    |       :action="route('admin.users.index')"
    |       :search-value="request('search')"
    |       :clear-href="request('search') ? route('admin.users.index') : null"
    |   />
    */
    $searchValue ??= request($searchName);
@endphp

<form
    method="GET"
    action="{{ $action }}"
    @if ($ajax) data-ajax-search @endif
    {{ $attributes->merge(['class' => 'flex flex-wrap items-center gap-2']) }}
>
    <x-ui.input
        :name="$searchName"
        :value="$searchValue"
        :placeholder="$searchPlaceholder"
        size="sm"
        icon="magnifying-glass"
        class="min-w-0 w-full flex-1 sm:min-w-[12rem] sm:flex-none"
    />
    <x-ui.button type="submit" variant="outline" size="sm">Search</x-ui.button>
    @if ($ajax)
        <x-ui.button
            type="button"
            variant="ghost"
            size="sm"
            data-ajax-search-clear
            x-show="searchActive"
            x-cloak
        >Clear</x-ui.button>
    @elseif ($clearHref)
        <x-ui.button :href="$clearHref" variant="ghost" size="sm">Clear</x-ui.button>
    @endif
</form>