27 lines
848 B
Vue
27 lines
848 B
Vue
<template>
|
|
<div class="flex flex-col items-center text-center p-6 space-y-4">
|
|
<img
|
|
v-if="childPhoto"
|
|
:src="childPhoto"
|
|
alt="Foto Anak"
|
|
class="w-40 h-40 rounded-full object-cover border-4 border-yellow-400 shadow-md"
|
|
/>
|
|
<h2 class="text-3xl font-bold text-orange-700 mt-4">Halo, Aku {{ childName }}</h2>
|
|
<p class="text-gray-700">Usiaku kini {{ age }} tahun 🎉</p>
|
|
<p class="text-gray-600">Putra/Putri dari</p>
|
|
<p class="text-lg font-semibold text-gray-800">{{ parentsName }}</p>
|
|
<p class="mt-6 text-gray-700">
|
|
Aku sangat senang jika kamu bisa hadir di pesta ulang tahunku!
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
childName: String,
|
|
parentsName: String,
|
|
age: [String, Number],
|
|
childPhoto: String
|
|
})
|
|
</script>
|
|
|