iptv-org.github.io/src/components/SearchFieldMini.svelte
2023-12-08 20:35:20 +03:00

39 lines
1.2 KiB
Svelte

<script>
import { query } from '~/store'
import { goto } from '$app/navigation'
function onSubmit() {
goto(`/?q=${$query}`)
}
</script>
<form on:submit|preventDefault={onSubmit} autocomplete="off" class="w-full">
<div class="w-full">
<label for="search-input" class="sr-only">Search</label>
<div class="relative w-full">
<div
class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none text-gray-500 dark:text-gray-400"
>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
clip-rule="evenodd"
></path>
</svg>
</div>
<input
type="search"
id="search-input"
bind:value={$query}
class="bg-gray-50 border border-gray-300 text-gray-900 outline-blue-500 text-sm rounded-md block w-full pl-10 p-1.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
placeholder="Search"
/>
</div>
</div>
</form>