changes

app/components/common/CountdownTimer.vue

@@ -1,26 +1,4 @@
-<!-- CountdownTimer.vue -->
-<template>
-  <div class="countdown-wrapper">
-    <span
-      v-if="isExpired"
-      class="tag is-danger"
-    >
-      {{ isVietnamese ? "Hết giờ" : "Expired" }}
-    </span>
-    <span
-      v-else
-      class="tag"
-      :class="tagClass"
-    >
-      <span class="countdown-text">{{ formattedTime }}</span>
-    </span>
-  </div>
-</template>
-
 <script setup>
-import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
-import { useStore } from "~/stores/index";
-
 const props = defineProps({
   dateValue: {
     type: [String, Date],
@@ -48,6 +26,8 @@ let intervalId = null;
 const isVietnamese = computed(() => store.lang === "vi");
 
 const tagClass = computed(() => {
+  if (isExpired) return "is-danger";
+
   const totalSeconds =
     timeRemaining.value.days * 86400 +
     timeRemaining.value.hours * 3600 +
@@ -123,19 +103,15 @@ watch(
   { deep: true },
 );
 
-onMounted(() => {
-  startCountdown();
-});
+onMounted(startCountdown);
 
 onBeforeUnmount(() => {
-  if (intervalId) {
-    clearInterval(intervalId);
-  }
+  clearInterval(intervalId);
 });
 </script>
 
-<style scoped>
-.countdown-wrapper {
-  display: inline-block;
-}
-</style>
+<template>
+  <span :class="['tag', tagClass]">
+    {{ isExpired ? (isVietnamese ? "Hết giờ" : "Expired") : formattedTime }}
+  </span>
+</template>