It's a todo list.
add play/pause button, change trash and add icons
+21
-10
+15
-8
src/lib/TaskItem.svelte
+15
-8
src/lib/TaskItem.svelte
···
46
46
</div>
47
47
48
48
<div class="flex w-fit items-center justify-center">
49
-
<label>
50
-
hr
51
-
<input type="number" min="0" bind:value={hourInput} class="w-12" />
52
-
</label>
49
+
<input type="number" min="0" bind:value={hourInput} class="w-12" />
53
50
<p class="mr-4">:</p>
54
51
<input type="number" min="0" max="59" bind:value={minuteInput} class="w-12" />
55
52
<p class="mr-4">:</p>
···
58
55
</form>
59
56
</dialog>
60
57
61
-
<li class="group flex justify-between items-center gap-4">
58
+
<li class="group flex justify-between h-fit items-center gap-4">
62
59
<div class="flex w-full gap-4 items-center pr-4 py-2">
63
60
<input
64
61
type="checkbox"
···
72
69
/>
73
70
</div>
74
71
75
-
<div class="flex gap-4 w-fit items-center">
72
+
<div class="flex gap-4 w-fit h-fit items-center">
76
73
<button
77
74
command="show-modal"
78
75
commandfor={`timer_${task.id}`}
···
81
78
>
82
79
{formatSecondsToDuration(task.duration!)}
83
80
</button>
81
+
<button
82
+
onclick={toggleInterval}
83
+
class="w-full h-fit bg-white hover:bg-gray-200 border rounded-full p-2"
84
+
>
85
+
{#if interval.isActive}
86
+
<img src="/basil--pause-solid.svg" alt="Pause" class="w-8" />
87
+
{:else}
88
+
<img src="/basil--play-solid.svg" alt="Play" class="w-8" />
89
+
{/if}
90
+
</button>
84
91
<button
85
92
onclick={() => onDelete(task.id)}
86
-
class="px-4 py-2 bg-red-500 rounded-xl text-white"
93
+
class="p-2 bg-red-500 rounded-xl text-white w-full h-fit"
87
94
>
88
-
-
95
+
<img src="/basil--trash-solid.svg" alt="Trash" class="w-24" />
89
96
</button>
90
97
</div>
91
98
</li>
+2
-2
src/routes/[id]/+page.svelte
+2
-2
src/routes/[id]/+page.svelte
···
138
138
{/each}
139
139
<li class="flex gap-4 w-full">
140
140
<input type="text" bind:value={task_input} class="bg-transparent pr-4 py-2 border-b w-full"/>
141
-
<button onclick={addTask} class="px-5 rounded-full bg-white text-black">
142
-
+
141
+
<button onclick={addTask} class="p-2 rounded-full bg-white hover:bg-gray-200 border text-black">
142
+
<img src="/basil--plus-solid.svg" alt="Add" class="w-8"/>
143
143
</button>
144
144
</li>
145
145
</ul>
+1
static/basil--pause-solid.svg
+1
static/basil--pause-solid.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" style="color:currentColor" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17.276 5.47c.435.16.724.575.724 1.039V17.49c0 .464-.29.879-.724 1.039a3.7 3.7 0 0 1-2.552 0A1.11 1.11 0 0 1 14 17.491V6.51c0-.464.29-.879.724-1.04a3.7 3.7 0 0 1 2.552 0m-8 0c.435.16.724.575.724 1.039V17.49c0 .464-.29.879-.724 1.039a3.7 3.7 0 0 1-2.552 0A1.11 1.11 0 0 1 6 17.491V6.51c0-.464.29-.879.724-1.04a3.7 3.7 0 0 1 2.552 0"/></svg>
+1
static/basil--play-solid.svg
+1
static/basil--play-solid.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" style="color:currentColor" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19.266 13.516a1.917 1.917 0 0 0 0-3.032A35.8 35.8 0 0 0 9.35 5.068l-.653-.232c-1.248-.443-2.567.401-2.736 1.69a42.5 42.5 0 0 0 0 10.948c.17 1.289 1.488 2.133 2.736 1.69l.653-.232a35.8 35.8 0 0 0 9.916-5.416"/></svg>
+1
static/basil--plus-solid.svg
+1
static/basil--plus-solid.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12.75 7a.75.75 0 0 0-1.5 0v4.25H7a.75.75 0 0 0 0 1.5h4.25V17a.75.75 0 0 0 1.5 0v-4.25H17a.75.75 0 0 0 0-1.5h-4.25z"/></svg>
+1
static/basil--trash-solid.svg
+1
static/basil--trash-solid.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="color:white"><path fill="white" d="M9.25 3a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 .75.75v.75H19a.75.75 0 0 1 0 1.5H5a.75.75 0 0 1 0-1.5h4.25z"/><path fill="white" fill-rule="evenodd" d="M6.24 7.945a.5.5 0 0 1 .497-.445h10.526a.5.5 0 0 1 .497.445l.2 1.801a44.2 44.2 0 0 1 0 9.771l-.02.177a2.6 2.6 0 0 1-2.226 2.29a26.8 26.8 0 0 1-7.428 0a2.6 2.6 0 0 1-2.227-2.29l-.02-.177a44.2 44.2 0 0 1 0-9.77zm4.51 3.455a.75.75 0 0 0-1.5 0v7a.75.75 0 0 0 1.5 0zm4 0a.75.75 0 0 0-1.5 0v7a.75.75 0 0 0 1.5 0z" clip-rule="evenodd"/></svg>
