70 lines
2.0 KiB
Vue
70 lines
2.0 KiB
Vue
<template>
|
|
<div class="min-h-screen flex items-center justify-center bg-gray-100">
|
|
<div class="relative max-w-md w-full bg-white rounded-lg shadow-lg overflow-hidden">
|
|
<!-- Background Image -->
|
|
<div
|
|
class="absolute inset-0 bg-cover bg-center opacity-20"
|
|
:style="{ backgroundImage: `url(${imageUrl})` }"
|
|
></div>
|
|
|
|
<!-- Content -->
|
|
<div class="relative z-10 p-8 text-center">
|
|
<h1 class="text-3xl font-serif font-bold text-gray-800 mb-4">
|
|
{{ data.nama_pengantin || 'Undangan Pernikahan' }}
|
|
</h1>
|
|
|
|
<div class="mb-6">
|
|
<h2 class="text-xl font-semibold text-gray-700">Tanggal Acara</h2>
|
|
<p class="text-gray-600">
|
|
{{ formatDate(data.tanggal_acara) || 'Tanggal belum ditentukan' }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<h2 class="text-xl font-semibold text-gray-700">Lokasi</h2>
|
|
<p class="text-gray-600">{{ data.lokasi || 'Lokasi belum ditentukan' }}</p>
|
|
</div>
|
|
|
|
<div class="mt-8">
|
|
<p class="text-sm text-gray-500 italic">
|
|
{{ data.template.nama_template }} - {{ data.template.paket.toUpperCase() }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useRuntimeConfig } from '#app'
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
required: true,
|
|
validator: (data) => 'template' in data && 'slug' in data.template,
|
|
},
|
|
})
|
|
|
|
const config = useRuntimeConfig()
|
|
const backendUrl = config.public.apiBaseUrl
|
|
|
|
const imageUrl = computed(() => {
|
|
return props.data.template.foto
|
|
? `${backendUrl}/storage/${props.data.template.foto}`
|
|
: 'https://via.placeholder.com/400x600'
|
|
})
|
|
|
|
const formatDate = (dateString) => {
|
|
if (!dateString) return null
|
|
const date = new Date(dateString)
|
|
return date.toLocaleDateString('id-ID', {
|
|
weekday: 'long',
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
})
|
|
}
|
|
</script>
|