1 files changed, 39 insertions, 0 deletions
diff --git a/src/lib/components/TimerControls.svelte b/src/lib/components/TimerControls.svelte
new file mode 100644
index 0000000..5983514
--- /dev/null
+++ b/src/lib/components/TimerControls.svelte
@@ -0,0 +1,39 @@
+<script>
+  import {
+    getDisplay,
+    getRunning,
+    start,
+    stopTimer,
+    changeMinutes,
+  } from "../stores/timer.svelte.js";
+</script>
+
+<fieldset id="timer">
+  <button
+    title="Timer decrement"
+    disabled={getRunning()}
+    onclick={() => changeMinutes(-0.5)}
+  >
+    <i class="fa-solid fa-minus"></i>
+  </button>
+  <input
+    id="timer-display"
+    title="Time display"
+    type="text"
+    readonly
+    value={getDisplay()}
+  />
+  <button
+    title="Timer increment"
+    disabled={getRunning()}
+    onclick={() => changeMinutes(0.5)}
+  >
+    <i class="fa-solid fa-plus"></i>
+  </button>
+  <button title="Timer start" onclick={() => start(true)}>
+    <i class="fa-solid fa-play"></i>
+  </button>
+  <button title="Timer stop" onclick={() => stopTimer()}>
+    <i class="fa-solid fa-stop"></i>
+  </button>
+</fieldset>