It's a todo list.
1<script lang="ts">
2 import { useInterval } from "runed";
3 import type { Task } from "./stores.svelte";
4 import { formatSecondsToDuration } from "./utils";
5
6 let { task = $bindable(), onDelete }: { task: Task, onDelete: (taskId: string) => void } = $props();
7
8 const interval = useInterval(1000, {
9 immediate: false,
10 callback: () => {
11 task.duration++;
12 }
13 });
14
15 function toggleInterval() {
16 if (interval.isActive) {
17 interval.pause();
18 }
19 else {
20 interval.resume();
21 }
22 }
23</script>
24
25<li class="group flex justify-between items-center gap-4">
26 <div class="flex w-full gap-4 items-center pr-4 py-2">
27 <input
28 type="checkbox"
29 bind:checked={task.completed}
30 class="w-6 h-6 bg-transparent"
31 />
32 <input
33 type="text"
34 bind:value={task.description}
35 class={`w-full hover:underline text-ellipsis overflow-hidden bg-transparent ${task.completed && "text-white/50"}`}
36 />
37 </div>
38
39 <div class="flex gap-4 w-fit items-center">
40 <button
41 onclick={toggleInterval}
42 class="w-fit h-fit tabular-nums text-lg"
43 >
44 {formatSecondsToDuration(task.duration!)}
45 </button>
46 <button
47 onclick={() => onDelete(task.id)}
48 class="px-4 py-2 bg-red-500 rounded-xl text-white"
49 >
50 -
51 </button>
52 </div>
53</li>