alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import { resolve } from "$app/paths";
3 import CircleDot from "$icon/circle-dot";
4 import CircleX from "$icon/circle-x";
5 import Plus from "$icon/plus";
6 import Search from "$icon/search";
7 import Button from "$lib/components/ui/Button.svelte";
8 import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
9
10 interface Props {
11 ownerHandle: string;
12 repoName: string;
13 state: "open" | "closed";
14 openCount: number;
15 closedCount: number;
16 }
17
18 let { ownerHandle, repoName, state, openCount, closedCount }: Props = $props();
19
20 const base = $derived(`/${ownerHandle}/${repoName}/issues`);
21</script>
22
23<div class="grid grid-cols-1 gap-2 sm:grid-cols-[1fr_auto_auto]">
24 <form class="flex" method="GET">
25 <!-- TODO: wire up search query submission -->
26 <div class="relative flex w-full items-center">
27 <Search
28 class="pointer-events-none absolute left-2 size-4 text-foreground-placeholder"
29 aria-hidden="true"
30 />
31 <input
32 class="h-full w-full rounded border border-border-default bg-background-default py-1.5 pr-2 pl-8 text-sm outline-none focus:border-border-strong"
33 type="text"
34 name="q"
35 placeholder="Search issues..."
36 aria-label="Search issues"
37 />
38 </div>
39 </form>
40
41 <ButtonGroup>
42 <!-- TODO: wire up state filter navigation -->
43 <Button
44 href={resolve(`${base}?state=open` as "/")}
45 variant={state === "open" ? "default" : "ghost"}
46 size="sm"
47 icon={CircleDot}
48 >
49 <span class="hidden sm:inline">{openCount}</span>
50 Open
51 </Button>
52 <Button
53 href={resolve(`${base}?state=closed` as "/")}
54 variant={state === "closed" ? "default" : "ghost"}
55 size="sm"
56 icon={CircleX}
57 >
58 <span class="hidden sm:inline">{closedCount}</span>
59 Closed
60 </Button>
61 </ButtonGroup>
62
63 <!-- TODO: point at the new issue route once it exists -->
64 <Button href={resolve(`${base}/new` as "/")} variant="primary" size="sm" icon={Plus}>New</Button>
65</div>