52 lines
1.4 KiB
Vue
52 lines
1.4 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gradient-to-br from-yellow-200 to-orange-200 py-10 px-6 text-center">
|
|
<h2 class="text-3xl font-bold text-orange-700 mb-6">📖 Buku Tamu</h2>
|
|
|
|
<p class="mb-4">Tinggalkan ucapan terbaikmu untuk {{ guestName || 'Teman Kami' }} 💌</p>
|
|
|
|
<form @submit.prevent="submitMessage" class="max-w-md mx-auto bg-white p-6 rounded-2xl shadow-md">
|
|
<textarea
|
|
v-model="message"
|
|
rows="3"
|
|
placeholder="Tulis ucapan di sini..."
|
|
class="w-full border rounded-md p-3 focus:outline-none focus:ring-2 focus:ring-orange-400"
|
|
></textarea>
|
|
|
|
<button
|
|
type="submit"
|
|
class="mt-4 bg-orange-600 text-white py-2 px-6 rounded-full hover:bg-orange-700 transition"
|
|
>
|
|
Kirim
|
|
</button>
|
|
</form>
|
|
|
|
<div v-if="messages.length" class="mt-8 max-w-md mx-auto text-left">
|
|
<h3 class="text-lg font-semibold text-gray-700 mb-3">Ucapan:</h3>
|
|
<ul class="space-y-3">
|
|
<li v-for="(msg, i) in messages" :key="i" class="bg-white p-4 rounded-lg shadow">
|
|
{{ msg }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
defineProps({
|
|
guestName: String,
|
|
messages: Array
|
|
})
|
|
|
|
const emit = defineEmits(['addMessage'])
|
|
const message = ref('')
|
|
|
|
const submitMessage = () => {
|
|
if (message.value.trim()) {
|
|
emit('addMessage', message.value)
|
|
message.value = ''
|
|
}
|
|
}
|
|
</script>
|