27 lines
719 B
Vue
27 lines
719 B
Vue
<template>
|
|
<span :class="timerClasses">
|
|
{{ formattedTime }}
|
|
</span>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import { formatTime } from '../utils/timeFormatter';
|
|
|
|
const props = defineProps({
|
|
seconds: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
isPulsating: Boolean, // For active timer
|
|
isNegative: Boolean, // For negative time text color
|
|
});
|
|
|
|
const formattedTime = computed(() => formatTime(props.seconds));
|
|
|
|
const timerClasses = computed(() => ({
|
|
'font-mono text-5xl md:text-7xl lg:text-8xl font-bold': true,
|
|
'text-red-500 dark:text-red-400': props.isNegative,
|
|
'animate-pulseNegative': props.isNegative && props.isPulsating, // Pulsate text if negative and active
|
|
}));
|
|
</script> |