52 lines
1.4 KiB
Vue
52 lines
1.4 KiB
Vue
<template>
|
|
<div class="p-6 text-center max-w-xl mx-auto">
|
|
<h2 class="text-3xl font-bold text-orange-700 mb-6">💌 Buku Tamu 💌</h2>
|
|
|
|
<div class="bg-white/70 backdrop-blur-md rounded-2xl p-6 shadow-md">
|
|
<form @submit.prevent="submitMessage">
|
|
<textarea
|
|
v-model="newMessage"
|
|
class="w-full p-3 border border-yellow-400 rounded-lg focus:ring focus:ring-yellow-300"
|
|
rows="3"
|
|
placeholder="Tulis ucapan untuk {{ guestName }}..."
|
|
></textarea>
|
|
|
|
<button
|
|
type="submit"
|
|
class="mt-3 bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-full shadow-md transition"
|
|
>
|
|
Kirim Ucapan
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="mt-6 space-y-3">
|
|
<div
|
|
v-for="(msg, i) in messages"
|
|
:key="i"
|
|
class="bg-white/60 p-3 rounded-xl shadow text-gray-700"
|
|
>
|
|
💬 {{ msg }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
guestName: String,
|
|
messages: Array
|
|
})
|
|
|
|
const emit = defineEmits(['addMessage'])
|
|
const newMessage = ref('')
|
|
|
|
function submitMessage() {
|
|
if (!newMessage.value.trim()) return
|
|
emit('addMessage', newMessage.value)
|
|
newMessage.value = ''
|
|
}
|
|
</script>
|
|
|