<script lang="ts">
    // Search input + button used by all three backlog tables on the
    // crawler dashboard. The three sites had identical markup before;
    // the audit (F2) flagged the duplication. `bindable` lets the
    // parent keep `value` in $state and read it after Enter / click.
    let {
        value = $bindable(''),
        placeholder = 'Search manga…',
        onSearch
    }: {
        value?: string;
        placeholder?: string;
        onSearch: () => void;
    } = $props();
</script>

<input
    {placeholder}
    bind:value
    onkeydown={(e) => e.key === 'Enter' && onSearch()}
/>
<button onclick={onSearch}>Search</button>
