Undangan/proyek-frontend/app/components/undangan/undangan-pernikahan-premium.vue
2025-10-15 16:47:07 +07:00

70 lines
2.0 KiB
Vue

<template>
<div>
<!-- Pastikan data sudah ada -->
<WeddingA v-if="props.data" :data="formattedData" />
<div v-else class="text-center py-20">
<p class="text-red-600 font-semibold">Undangan tidak ditemukan 😢</p>
</div>
</div>
</template>
<script setup>
import WeddingA from '~/components/templates/wedding/weddingA.vue'
// Props dari parent (/p/[code].vue)
const props = defineProps({
data: {
type: Object,
required: true
}
})
// Format data dari backend agar cocok dengan struktur WeddingA.vue
const formattedData = computed(() => {
const f = props.data.form || {}
return {
id: props.data.id,
coverImage: f.cover_image || '/default-cover.jpg',
heroImage: f.hero_image || '/default-hero.jpg',
greeting: f.say_something || 'Dengan memohon rahmat dan ridho Allah SWT, kami bermaksud mengundang Anda...',
eventDate: f.hari_tanggal_resepsi,
bride: {
fullname: f.nama_lengkap_wanita,
nickname: f.nama_panggilan_wanita,
photo: f.foto_wanita ? `http://localhost:8000/storage/${f.foto_wanita}` : '/wanita.jpg',
fatherName: f.nama_ayah_wanita,
motherName: f.nama_ibu_wanita,
instagram: f.instagram_wanita || ''
},
groom: {
fullname: f.nama_lengkap_pria,
nickname: f.nama_panggilan_pria,
photo: f.foto_pria ? `http://localhost:8000/storage/${f.foto_pria}` : '/pria.jpg',
fatherName: f.nama_ayah_pria,
motherName: f.nama_ibu_pria,
instagram: f.instagram_pria || ''
},
akad: {
date: f.hari_tanggal_akad,
time: f.waktu_akad,
place: f.tempat_akad,
address: f.alamat_akad,
mapUrl: f.link_gmaps_akad
},
resepsi: {
date: f.hari_tanggal_resepsi,
time: f.waktu_resepsi,
place: f.tempat_resepsi,
address: f.alamat_resepsi,
mapUrl: f.link_gmaps_resepsi
},
gallery: [1, 2, 3, 4, 5, 6]
.map(i => f[`foto_${i}`])
.filter(Boolean)
.map(x => `http://localhost:8000/storage/${x}`),
musicUrl: f.link_music || ''
}
})
</script>