@props([
    'name' => 'q',
    'placeholder' => 'Search…',
    'value' => null,
])

<div {{ $attributes->only('class')->merge(['class' => 'relative w-full max-w-sm']) }}>
    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-[var(--color-text-muted)]">
        <x-ui.icon name="search" class="h-4 w-4" />
    </span>

    <input
        type="search"
        name="{{ $name }}"
        value="{{ $value ?? request($name) }}"
        placeholder="{{ $placeholder }}"
        {{ $attributes->except('class')->merge([
            'class' => 'tw-input pl-9',
        ]) }}
    >
</div>