| 1 | <script setup lang="ts"> |
| 2 | import { computed } from 'vue' |
| 3 | import { useTimer } from '../composables/useTimer' |
| 4 | |
| 5 | const { status, percentage, mode, timer, reset, toggle } = useTimer() |
| 6 | |
| 7 | const color = computed(() => { |
| 8 | if (status.value === 'stopped') |
| 9 | return 'op50' |
| 10 | if (status.value === 'paused') |
| 11 | return 'text-blue6 dark:text-blue3' |
| 12 | |
| 13 | if (percentage.value > 100) |
| 14 | return 'text-red6 dark:text-red3' |
| 15 | else if (percentage.value > 80) |
| 16 | return 'text-yellow6 dark:text-yellow3' |
| 17 | else |
| 18 | return 'text-green6 dark:text-green3' |
| 19 | }) |
| 20 | </script> |
| 21 | |
| 22 | <template> |
| 23 | <div |
| 24 | class="group flex items-center justify-center pl-4 select-none" |
| 25 | :class="color" |
| 26 | > |
| 27 | <div class="w-22px cursor-pointer"> |
| 28 | <div |
| 29 | class="group-hover:hidden text-2xl" |
| 30 | :class="mode === 'countdown' ? 'i-carbon:timer' : 'i-carbon:time'" |
| 31 | /> |
| 32 | <div class="group-not-hover:hidden flex flex-col items-center"> |
| 33 | <div class="relative op-80 hover:op-100" @click="toggle"> |
| 34 | <div v-if="status === 'running'" class="i-carbon:pause text-lg" /> |
| 35 | <div v-else class="i-carbon:play" /> |
| 36 | </div> |
| 37 | <div class="op-80 hover:op-100" @click="reset"> |
| 38 | <div class="i-carbon:renew" /> |
| 39 | </div> |
| 40 | </div> |
| 41 | </div> |
| 42 | <div class="text-3xl px-3 my-auto font-mono"> |
| 43 | <template v-if="timer.h"> |
| 44 | <span>{{ timer.h }}</span> |
| 45 | <span op50>:</span> |
| 46 | </template> |
| 47 | <span>{{ timer.m }}</span> |
| 48 | <span op50>:</span> |
| 49 | <span>{{ timer.s }}</span> |
| 50 | </div> |
| 51 | </div> |
| 52 | </template> |
| 53 |