vue.js used

src/components/TimerDisplay.vue

@@ -0,0 +1,27 @@
+<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>