blob: b7b21834195adfdd537abb247d633bedc135ddae (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<script lang="ts">
import { parseTodoPayload } from "../logic/todo";
let { payload }: { readonly payload: unknown } = $props();
const data = $derived(parseTodoPayload(payload));
</script>
{#if data !== null && data.todos.length > 0}
<ul class="flex flex-col gap-1">
{#each data.todos as todo, i (i)}
<li class="flex items-start gap-2 rounded-box bg-base-200 px-3 py-2 text-sm">
<!-- Status indicator -->
<span class="mt-0.5 shrink-0">
{#if todo.status === "in_progress"}
<span class="block h-4 w-4 rounded-full bg-primary"></span>
{:else if todo.status === "completed"}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
class="h-4 w-4 text-success"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
{:else if todo.status === "cancelled"}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="3"
stroke-linecap="round"
stroke-linejoin="round"
class="h-4 w-4 text-base-content/40"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
{:else}
<!-- pending: empty circle -->
<span class="block h-4 w-4 rounded-full border-2 border-base-content/30"></span>
{/if}
</span>
<!-- Content -->
<span
class:flex-1={true}
class:line-through={todo.status === "completed" || todo.status === "cancelled"}
class:opacity-50={todo.status === "completed" || todo.status === "cancelled"}
>
{todo.content}
</span>
</li>
{/each}
</ul>
{/if}
|
