alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { page } from "$app/state";
3 import Search from "$icon/search";
4 import X from "$icon/x";
5
6 let form: HTMLFormElement;
7 // seed from the url so the query (and the clear button) survive a submit
8 let value = $state(page.url.searchParams.get("q") ?? "");
9
10 const clear = () => {
11 value = "";
12 form.requestSubmit();
13 };
14</script>
15
16<form bind:this={form} class="flex" method="GET">
17 <!-- TODO: wire up search query submission -->
18 <div class="relative flex w-full items-center">
19 <Search
20 class="pointer-events-none absolute left-2 size-4 text-foreground-placeholder"
21 aria-hidden="true"
22 />
23 <input
24 bind:value
25 class="h-full w-full rounded border border-border-default bg-background-default py-1.5 pr-8 pl-8 text-sm outline-none focus:border-border-strong"
26 type="text"
27 name="q"
28 placeholder="Search issues..."
29 aria-label="Search issues"
30 />
31 {#if value}
32 <button
33 type="button"
34 onclick={clear}
35 class="absolute right-2 flex items-center text-foreground-placeholder transition-colors hover:text-foreground-default"
36 aria-label="Clear search"
37 >
38 <X class="size-4" aria-hidden="true" />
39 </button>
40 {/if}
41 </div>
42</form>