68 lines
2.0 KiB
Vue
68 lines
2.0 KiB
Vue
<template>
|
|
<section class="w-full max-w-6xl mx-auto">
|
|
<div class="flex flex-col lg:flex-row items-center justify-between gap-8">
|
|
<!-- Bagian kiri: Teks -->
|
|
<div class="flex-1 text-center lg:text-left">
|
|
<h1 class="text-orange-700 text-2xl md:text-3xl font-bold mb-6">
|
|
Ulang Tahun Ke -{{ age }}
|
|
</h1>
|
|
|
|
<h2 class="text-orange-800 text-3xl md:text-5xl font-bold mb-6">
|
|
{{ childName }}
|
|
</h2>
|
|
|
|
<h3 class="text-orange-700 text-xl md:text-2xl font-semibold mb-4">
|
|
Anak Ke -{{ childOrder }}
|
|
</h3>
|
|
|
|
<!-- Gambar Minion -->
|
|
<div class="flex justify-center lg:justify-start mb-6">
|
|
<img
|
|
:src="getFullPhotoUrl(minionImage)"
|
|
alt="Minion"
|
|
class="w-85 h-auto object-contain drop-shadow-lg hover:scale-110 transition-transform duration-300"
|
|
/>
|
|
</div>
|
|
|
|
<h4 class="text-orange-800 text-2xl md:text-3xl font-bold mb-8">
|
|
{{ parentNames }}
|
|
</h4>
|
|
</div>
|
|
|
|
<!-- Bagian kanan: Foto Anak -->
|
|
<div class="flex-1">
|
|
<div class="bg-yellow-300/60 rounded-3xl p-8 shadow-xl">
|
|
<img
|
|
:src="getFullPhotoUrl(childPhoto)"
|
|
:alt="childName"
|
|
class="w-full h-80 object-cover rounded-2xl shadow-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { age, childName, childOrder, parentNames, childPhoto } = defineProps({
|
|
age: [Number, String],
|
|
childName: String,
|
|
childOrder: [Number, String],
|
|
parentNames: String,
|
|
childPhoto: [String, Array]
|
|
})
|
|
|
|
// 🟡 Lokasi file Minion kamu
|
|
const minionImage = '/minion2.png'
|
|
|
|
// Fungsi untuk mengatur URL gambar
|
|
const getFullPhotoUrl = (photo) => {
|
|
if (!photo) return '/assets/img/child-placeholder.jpg'
|
|
if (photo.startsWith('http')) return photo
|
|
if (photo.startsWith('/')) return photo // untuk file lokal di /public/
|
|
return `http://localhost:8000/storage/${photo}`
|
|
}
|
|
</script>
|
|
|
|
|