61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
<template>
|
|
<section class="text-center p-6 max-w-lg mx-auto">
|
|
<h2 class="text-3xl font-bold text-blue-700 mb-6">💬 Buku Tamu</h2>
|
|
|
|
<p class="text-gray-600 mb-4">{{ saySomething }}</p>
|
|
|
|
<form @submit.prevent="sendMessage" class="space-y-3">
|
|
<input
|
|
v-model="guestNameInput"
|
|
type="text"
|
|
placeholder="Nama Anda"
|
|
class="w-full border rounded-lg px-4 py-2"
|
|
required
|
|
/>
|
|
<textarea
|
|
v-model="messageInput"
|
|
rows="3"
|
|
placeholder="Tulis ucapan Anda..."
|
|
class="w-full border rounded-lg px-4 py-2"
|
|
required
|
|
></textarea>
|
|
<button
|
|
type="submit"
|
|
class="bg-blue-600 text-white px-5 py-2 rounded-full shadow hover:bg-blue-700"
|
|
>
|
|
Kirim
|
|
</button>
|
|
</form>
|
|
|
|
<div v-if="messages.length" class="mt-8 text-left space-y-4">
|
|
<div
|
|
v-for="(msg, index) in messages"
|
|
:key="index"
|
|
class="bg-white/70 p-4 rounded-lg shadow"
|
|
>
|
|
<p class="font-semibold text-blue-700">{{ msg.name }}</p>
|
|
<p class="text-gray-700">{{ msg.text }}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
const props = defineProps({
|
|
guestName: String,
|
|
saySomething: String,
|
|
messages: Array
|
|
})
|
|
const emit = defineEmits(['addMessage'])
|
|
|
|
const guestNameInput = ref(props.guestName || '')
|
|
const messageInput = ref('')
|
|
|
|
const sendMessage = () => {
|
|
if (!guestNameInput.value || !messageInput.value) return
|
|
emit('addMessage', { name: guestNameInput.value, text: messageInput.value })
|
|
messageInput.value = ''
|
|
}
|
|
</script>
|