✨ (interval) new way to set interval time

src/components/IntervalInput.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="interval-input">
+    <button v-show="editable" @click="minus">-</button>
+    <h3>{{ interval }} {{ label }}</h3>
+    <button v-show="editable" @click="plus">+</button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from '@vue/composition-api'
+
+const MIN_INTERVAL = 1
+
+export default defineComponent({
+  name: 'IntervalInput',
+  props: {
+    editable: { type: Boolean, required: true },
+    interval: { type: Number, required: true }
+  },
+  setup(props, { emit }) {
+    const minus = () => {
+      if (props.interval > MIN_INTERVAL) {
+        emit('update', props.interval - 1)
+      }
+    }
+    const plus = () => {
+      emit('update', props.interval + 1)
+    }
+
+    const label = computed(() =>
+      props.interval > MIN_INTERVAL ? 'minutes' : 'minute'
+    )
+
+    return {
+      minus,
+      plus,
+      label
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.interval-input {
+  margin: 0 auto;
+  max-width: 50vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+</style>