36 lines
1.1 KiB
Vue
36 lines
1.1 KiB
Vue
<template>
|
|
<div class="min-h-screen flex flex-col items-center justify-center text-center bg-orange-100 py-10 px-6">
|
|
<h2 class="text-3xl font-bold text-orange-700 mb-4">📅 Detail Acara</h2>
|
|
|
|
<div class="bg-white rounded-2xl shadow-md p-6 w-full max-w-md text-gray-700">
|
|
<p class="mb-2"><strong>Hari & Tanggal:</strong> {{ formatDate(hari_tanggal_acara) }}</p>
|
|
<p class="mb-2"><strong>Waktu:</strong> {{ waktu }}</p>
|
|
<p class="mb-2"><strong>Alamat:</strong> {{ alamat }}</p>
|
|
|
|
<a
|
|
v-if="link_gmaps"
|
|
:href="link_gmaps"
|
|
target="_blank"
|
|
class="inline-block mt-4 bg-orange-600 text-white py-2 px-6 rounded-full hover:bg-orange-700 transition"
|
|
>
|
|
📍 Lihat di Google Maps
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
hari_tanggal_acara: String,
|
|
waktu: String,
|
|
alamat: String,
|
|
link_gmaps: String
|
|
})
|
|
|
|
const formatDate = (dateStr) => {
|
|
if (!dateStr) return '-'
|
|
const d = new Date(dateStr)
|
|
return d.toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })
|
|
}
|
|
</script>
|