71 lines
2.5 KiB
Vue
71 lines
2.5 KiB
Vue
<template>
|
|
<section class="w-full max-w-4xl mx-auto text-center">
|
|
<h1 class="text-orange-700 text-3xl md:text-4xl font-bold mb-8">
|
|
Buku Tamu
|
|
</h1>
|
|
|
|
<!-- Form -->
|
|
<div class="bg-yellow-300/60 rounded-3xl p-6 shadow-xl mb-8">
|
|
<form @submit.prevent="submitMessage" class="space-y-4">
|
|
<input v-model="form.name" type="text" placeholder="Nama"
|
|
class="w-full px-4 py-2 rounded-xl border-2 border-orange-400 focus:ring-2 focus:ring-orange-500">
|
|
<textarea v-model="form.message" placeholder="Ucapan"
|
|
class="w-full px-4 py-2 rounded-xl border-2 border-orange-400 focus:ring-2 focus:ring-orange-500"></textarea>
|
|
<select v-model="form.attendance"
|
|
class="w-full px-4 py-2 rounded-xl border-2 border-orange-400 focus:ring-2 focus:ring-orange-500">
|
|
<option value="yes">Hadir</option>
|
|
<option value="no">Tidak Hadir</option>
|
|
<option value="maybe">Mungkin</option>
|
|
</select>
|
|
<button type="submit"
|
|
class="bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 rounded-xl font-semibold shadow-lg">
|
|
Kirim
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Messages -->
|
|
<div class="space-y-4">
|
|
<div v-for="msg in messages" :key="msg.id" class="bg-white rounded-xl shadow-md p-4 text-left">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="font-bold text-orange-800">{{ msg.name }}</span>
|
|
<span :class="getAttendanceClass(msg.attendance)" class="text-sm px-2 py-1 rounded-lg">
|
|
{{ msg.attendance }}
|
|
</span>
|
|
</div>
|
|
<p class="text-gray-700">{{ msg.message }}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const messages = ref([
|
|
{ id: 1, name: 'Gempita', message: 'Selamat ulang tahun cipung', attendance: 'yes' },
|
|
{ id: 2, name: 'Ayu Ting Ting', message: 'Selamat ulang tahun anak mama gigi', attendance: 'maybe' }
|
|
])
|
|
|
|
const form = ref({ name: '', message: '', attendance: 'yes' })
|
|
|
|
const submitMessage = () => {
|
|
if (form.value.name && form.value.message) {
|
|
messages.value.push({
|
|
id: Date.now(),
|
|
...form.value
|
|
})
|
|
form.value = { name: '', message: '', attendance: 'yes' }
|
|
}
|
|
}
|
|
|
|
const getAttendanceClass = (attendance) => {
|
|
switch (attendance) {
|
|
case 'yes': return 'bg-green-100 text-green-700'
|
|
case 'no': return 'bg-red-100 text-red-700'
|
|
case 'maybe': return 'bg-yellow-100 text-yellow-700'
|
|
default: return 'bg-gray-100 text-gray-700'
|
|
}
|
|
}
|
|
</script>
|