131 lines
4.0 KiB
Vue
131 lines
4.0 KiB
Vue
<template>
|
|
<section class="bg-[#FFF8EC] py-12 px-4">
|
|
<!-- Title -->
|
|
<div class="text-center mb-12" data-aos="fade-up">
|
|
<h2 class="text-3xl md:text-4xl font-serif text-rose-800 mb-4">Ucapan</h2>
|
|
<p class="text-gray-600">Berikan ucapan & doa restu untuk kami</p>
|
|
</div>
|
|
|
|
<!-- Layout -->
|
|
<div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-8">
|
|
<!-- Left Form -->
|
|
<div class="bg-white rounded-2xl shadow-lg p-6">
|
|
<h3 class="text-2xl font-bold text-yellow-500 mb-4">Say Something!</h3>
|
|
|
|
<form @submit.prevent="handleSubmit" class="space-y-4">
|
|
<!-- Name -->
|
|
<input
|
|
v-model="form.name"
|
|
type="text"
|
|
placeholder="Name"
|
|
class="w-full p-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-yellow-400"
|
|
/>
|
|
|
|
<!-- Message -->
|
|
<textarea
|
|
v-model="form.message"
|
|
placeholder="Message"
|
|
rows="3"
|
|
class="w-full p-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-yellow-400"
|
|
></textarea>
|
|
|
|
<!-- Attendance -->
|
|
<div>
|
|
<label class="block text-gray-600 mb-2">Attendance</label>
|
|
<div class="flex gap-3 justify-between bg-gray-50 rounded-full p-2">
|
|
<button
|
|
type="button"
|
|
:class="attendanceClass('Yes')"
|
|
@click="form.attendance = 'Yes'"
|
|
>
|
|
Yes
|
|
</button>
|
|
<button
|
|
type="button"
|
|
:class="attendanceClass('Maybe')"
|
|
@click="form.attendance = 'Maybe'"
|
|
>
|
|
Maybe
|
|
</button>
|
|
<button
|
|
type="button"
|
|
:class="attendanceClass('No')"
|
|
@click="form.attendance = 'No'"
|
|
>
|
|
No
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit -->
|
|
<button
|
|
type="submit"
|
|
class="w-full bg-yellow-400 text-white py-3 rounded-full font-semibold shadow hover:bg-yellow-500 transition"
|
|
>
|
|
Send Now!
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Right Comments -->
|
|
<div class="bg-white rounded-2xl shadow-lg p-6">
|
|
<div class="flex items-center gap-2 mb-4 text-gray-600 font-medium">
|
|
<span class="text-xl">💬</span>
|
|
<span>{{ comments.length }}</span>
|
|
</div>
|
|
|
|
<div v-for="(c, i) in comments" :key="i" class="mb-4">
|
|
<div class="flex items-center justify-between mb-1">
|
|
<span class="font-semibold text-gray-800">{{ c.name }}</span>
|
|
<span
|
|
class="px-3 py-1 text-xs font-medium rounded-full"
|
|
:class="{
|
|
'bg-green-100 text-green-600': c.attendance === 'Yes',
|
|
'bg-yellow-100 text-yellow-600': c.attendance === 'Maybe',
|
|
'bg-gray-200 text-gray-600': c.attendance === 'No'
|
|
}"
|
|
>
|
|
{{ c.attendance }}
|
|
</span>
|
|
</div>
|
|
<p class="text-gray-600 text-sm">{{ c.message }}</p>
|
|
<hr class="mt-3" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from "vue";
|
|
|
|
const form = reactive({
|
|
name: "",
|
|
message: "",
|
|
attendance: "",
|
|
});
|
|
|
|
const comments = ref([
|
|
{ name: "Tia SMAN6BDG", message: "Congrats!", attendance: "Yes" },
|
|
{ name: "Muthia Rahma", message: "Happy wedd my sisstaa!", attendance: "Maybe" },
|
|
]);
|
|
|
|
const handleSubmit = () => {
|
|
if (form.name && form.message && form.attendance) {
|
|
comments.value.push({ ...form });
|
|
form.name = "";
|
|
form.message = "";
|
|
form.attendance = "";
|
|
}
|
|
};
|
|
|
|
const attendanceClass = (val) => {
|
|
return [
|
|
"flex-1 text-center py-2 rounded-full font-medium transition",
|
|
form.attendance === val
|
|
? "bg-yellow-400 text-white shadow"
|
|
: "bg-white text-gray-500 border border-gray-200 hover:bg-gray-100",
|
|
];
|
|
};
|
|
</script>
|