path: root/frontend/src/lib/toolbar/Search.svelte

<script lang="ts">
	import { page } from '$app/state';
	import { debounce } from '$lib/Actions';
	import { accelerator } from '$lib/Shortcuts';

	interface Props {
		name: string;
		field: string;
		filter: { apply: (params: URLSearchParams) => void };
	}

	let { name, field = $bindable(), filter }: Props = $props();
</script>

<input
	type="text"
	size={25}
	class="btn-slate w-min"
	placeholder="Search {name}..."
	bind:value={field}
	use:debounce={{ callback: () => filter.apply(page.url.searchParams) }}
	use:accelerator={'q'}
/>