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 import Button from "$lib/components/ui/Button.svelte";
6 import Input from "$lib/components/ui/Input.svelte";
7
8 let form: HTMLFormElement;
9 // seed from the url so the query (and the clear button) survive a submit
10 let value = $state(page.url.searchParams.get("q") ?? "");
11
12 const clear = () => {
13 value = "";
14 form.requestSubmit();
15 };
16</script>
17
18<form bind:this={form} class="flex w-full" method="GET">
19 <!-- TODO: wire up search query submission -->
20 <div class="relative flex w-full items-center">
21 <Input
22 bind:value
23 type="text"
24 name="q"
25 placeholder="Search issues..."
26 aria-label="Search issues"
27 iconLeft={Search}
28 class={value ? "w-full pr-9" : "w-full"}
29 />
30 {#if value}
31 <Button
32 type="button"
33 variant="ghost"
34 size="sm"
35 icon={X}
36 onclick={clear}
37 aria-label="Clear search"
38 class="absolute right-1"
39 />
40 {/if}
41 </div>
42</form>