63 lines
1.8 KiB
Vue
63 lines
1.8 KiB
Vue
<template>
|
|
<div class="text-center p-6">
|
|
<h2 class="text-3xl font-bold text-orange-700 mb-6">🎈 Acara Ulang Tahun 🎈</h2>
|
|
|
|
<div class="bg-white/70 backdrop-blur-md rounded-2xl shadow-lg p-6 inline-block text-gray-700">
|
|
<p><strong>Hari & Tanggal:</strong> {{ formatDate(hari_tanggal_acara) }}</p>
|
|
<p><strong>Waktu:</strong> {{ waktu }}</p>
|
|
<p><strong>Alamat:</strong> {{ alamat }}</p>
|
|
<a
|
|
v-if="link_gmaps"
|
|
:href="link_gmaps"
|
|
target="_blank"
|
|
class="inline-block mt-4 text-blue-600 hover:underline"
|
|
>
|
|
📍 Lihat di Google Maps
|
|
</a>
|
|
</div>
|
|
|
|
<div v-if="countdownText" class="mt-8 text-xl font-semibold text-orange-700">
|
|
⏰ {{ countdownText }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watchEffect } from 'vue'
|
|
|
|
const props = defineProps({
|
|
hari_tanggal_acara: String,
|
|
waktu: String,
|
|
alamat: String,
|
|
link_gmaps: String,
|
|
hitung_mundur: String
|
|
})
|
|
|
|
const countdownText = ref('')
|
|
|
|
// Format tanggal
|
|
function formatDate(dateStr) {
|
|
if (!dateStr) return '-'
|
|
const date = new Date(dateStr)
|
|
return date.toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })
|
|
}
|
|
|
|
// Countdown
|
|
watchEffect(() => {
|
|
if (!props.hitung_mundur) return
|
|
|
|
const target = new Date(props.hitung_mundur)
|
|
const now = new Date()
|
|
const diff = target - now
|
|
|
|
if (diff <= 0) {
|
|
countdownText.value = 'Acara sedang berlangsung 🎉'
|
|
} else {
|
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24))
|
|
const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
|
|
const minutes = Math.floor((diff / (1000 * 60)) % 60)
|
|
countdownText.value = `${days} hari ${hours} jam ${minutes} menit lagi!`
|
|
}
|
|
})
|
|
</script>
|
|
|