Initial commit

app/components/common/CountdownTimer.vue

@@ -0,0 +1,135 @@
+<!-- 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],
+    required: true
+  },
+  format: {
+    type: String,
+    default: 'HH:mm:ss'
+  }
+})
+
+const store = useStore()
+const { $dayjs } = useNuxtApp()
+
+const timeRemaining = ref({
+  days: 0,
+  hours: 0,
+  minutes: 0,
+  seconds: 0
+})
+
+const isExpired = ref(false)
+let intervalId = null
+
+const isVietnamese = computed(() => store.lang === 'vi')
+
+const tagClass = computed(() => {
+  const totalSeconds = timeRemaining.value.days * 86400 +
+                      timeRemaining.value.hours * 3600 +
+                      timeRemaining.value.minutes * 60 +
+                      timeRemaining.value.seconds
+
+  if (totalSeconds <= 0) return 'is-danger'
+  if (totalSeconds <= 3600) return 'is-warning' // <= 1 hour
+  if (totalSeconds <= 86400) return 'is-info' // <= 1 day
+  return 'is-primary' // > 1 day
+})
+
+const formattedTime = computed(() => {
+  const { days, hours, minutes, seconds } = timeRemaining.value
+
+  if (days > 0) {
+    return isVietnamese 
+      ? `${days}d ${hours}h ${minutes}m` 
+      : `${days}d ${hours}h ${minutes}m`
+  }
+  
+  if (hours > 0) {
+    return isVietnamese 
+      ? `${hours}h ${minutes}m ${seconds}s` 
+      : `${hours}h ${minutes}m ${seconds}s`
+  }
+
+  return isVietnamese 
+    ? `${minutes}m ${seconds}s` 
+    : `${minutes}m ${seconds}s`
+})
+
+const calculateTimeRemaining = () => {
+  try {
+    const targetDate = $dayjs(props.dateValue)
+    const now = $dayjs()
+
+    if (now.isAfter(targetDate)) {
+      isExpired.value = true
+      timeRemaining.value = { days: 0, hours: 0, minutes: 0, seconds: 0 }
+      return
+    }
+
+    isExpired.value = false
+    const diff = targetDate.diff(now, 'second')
+
+    const days = Math.floor(diff / 86400)
+    const hours = Math.floor((diff % 86400) / 3600)
+    const minutes = Math.floor((diff % 3600) / 60)
+    const seconds = diff % 60
+
+    timeRemaining.value = { days, hours, minutes, seconds }
+  } catch (error) {
+    console.error('Error calculating countdown:', error)
+    isExpired.value = true
+  }
+}
+
+const startCountdown = () => {
+  calculateTimeRemaining()
+
+  if (intervalId) clearInterval(intervalId)
+
+  intervalId = setInterval(() => {
+    calculateTimeRemaining()
+
+    if (isExpired.value && intervalId) {
+      clearInterval(intervalId)
+      intervalId = null
+    }
+  }, 1000)
+}
+
+watch(() => props.dateValue, () => {
+  startCountdown()
+}, { deep: true })
+
+onMounted(() => {
+  startCountdown()
+})
+
+onBeforeUnmount(() => {
+  if (intervalId) {
+    clearInterval(intervalId)
+  }
+})
+</script>
+
+<style scoped>
+.countdown-wrapper {
+  display: inline-block;
+}
+</style>