89 lines
2.8 KiB
Vue
89 lines
2.8 KiB
Vue
<template>
|
|
<div>
|
|
<KhitanA
|
|
v-if="isCoverVisible"
|
|
:data="invitationData"
|
|
@next-page="openInvitation"
|
|
/>
|
|
|
|
<div v-else class="min-h-screen bg-blue-900 overflow-hidden">
|
|
<div class="fixed top-6 left-1/2 transform -translate-x-1/2 z-50">
|
|
<div class="flex space-x-2 bg-white/20 backdrop-blur-sm rounded-full px-4 py-2">
|
|
<button
|
|
v-for="(page, index) in pages"
|
|
:key="index"
|
|
@click="goToPage(index)"
|
|
:class="[
|
|
'px-3 py-1 rounded-full text-sm font-medium transition-all duration-300',
|
|
currentPage === index
|
|
? 'bg-yellow-400 text-blue-900'
|
|
: 'text-white hover:bg-white/20'
|
|
]"
|
|
>
|
|
{{ page.title }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative h-screen">
|
|
<Transition :name="transitionName" mode="out-in">
|
|
<component
|
|
:is="pages[currentPage].component"
|
|
:key="currentPage"
|
|
:data="invitationData"
|
|
class="absolute inset-0"
|
|
/>
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
// 3. Import SEMUA komponen, termasuk komponen sampul
|
|
import KhitanA from '~/components/templates/khitan/KhitanA.vue' // <-- IMPORT INI
|
|
import KhitanIntroduction from '~/components/templates/khitan/Introduction.vue'
|
|
import KhitanEvent from '~/components/templates/khitan/Event.vue'
|
|
import KhitanGallery from '~/components/templates/khitan/Gallery.vue'
|
|
import KhitanSay from '~/components/templates/khitan/GuestBook.vue'
|
|
import KhitanThankYou from '~/components/templates/khitan/ThankYou.vue'
|
|
|
|
// 4. Tambahkan state untuk mengontrol sampul
|
|
const isCoverVisible = ref(true) // <-- TAMBAHKAN INI
|
|
|
|
// --- Kode Anda yang sudah ada sebelumnya ---
|
|
const currentPage = ref(0)
|
|
const transitionName = ref('slide-right')
|
|
|
|
const pages = [
|
|
{ title: 'Introduction', component: KhitanIntroduction },
|
|
{ title: 'Event', component: KhitanEvent },
|
|
{ title: 'Gallery', component: KhitanGallery },
|
|
{ title: 'Say', component: KhitanSay },
|
|
{ title: 'Thank You', component: KhitanThankYou }
|
|
]
|
|
|
|
const invitationData = {
|
|
// Menambahkan guestName agar bisa ditampilkan di sampul
|
|
guestName: 'Tamu Undangan',
|
|
childName: 'Satria Huda Dinata',
|
|
fatherName: 'Bpk H. Munawar Huda, S.H.',
|
|
motherName: 'Ibu Hj. Dinah, A.M.Keb',
|
|
eventDate: '20-21 Juni 2025',
|
|
eventTime: '09:00 WIB s.d Selesai',
|
|
eventLocation: 'TMC Mangrove, Tanjung Pasir'
|
|
}
|
|
|
|
const goToPage = (index) => {
|
|
transitionName.value = index > currentPage.value ? 'slide-left' : 'slide-right'
|
|
currentPage.value = index
|
|
}
|
|
|
|
// 5. Tambahkan fungsi untuk membuka undangan
|
|
const openInvitation = () => {
|
|
isCoverVisible.value = false;
|
|
// Opsional: Anda bisa mulai putar musik di sini
|
|
}
|
|
</script> |