151 lines
4.9 KiB
Vue
151 lines
4.9 KiB
Vue
<template>
|
|
<section class="bg-transparent py-12 px-4">
|
|
<!-- Title -->
|
|
<div class="text-center mb-16" data-aos="fade-up">
|
|
<div class="flex items-center justify-center gap-3 mb-4">
|
|
<div class="w-450 h-px bg-amber-400"></div>
|
|
<Icon name="mdi:leaf" class="text-amber-500 text-2xl" />
|
|
<div class="w-450 h-px bg-amber-400"></div>
|
|
</div>
|
|
<h2 class="text-4xl md:text-5xl font-bold text-amber-600 mb-4">Say Something</h2>
|
|
</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 border border-gray-100">
|
|
<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"
|
|
required
|
|
class="w-full p-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-yellow-400 transition-all"
|
|
/>
|
|
|
|
<!-- Message -->
|
|
<textarea
|
|
v-model="form.message"
|
|
placeholder="Message"
|
|
rows="3"
|
|
required
|
|
class="w-full p-3 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-yellow-400 transition-all resize-none"
|
|
></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"
|
|
:disabled="!form.name || !form.message || !form.attendance"
|
|
class="w-full bg-yellow-400 hover:bg-yellow-500 text-white py-3 rounded-full font-semibold shadow transition disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Send Now!
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Right Comments -->
|
|
<div class="bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
|
|
<div class="flex items-center gap-2 mb-4 text-gray-600 font-medium">
|
|
<span class="text-xl">Chat</span>
|
|
<span>{{ comments.length }}</span>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div v-for="(c, i) in comments" :key="i">
|
|
<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 border-gray-200" />
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-if="comments.length === 0" class="text-center py-8 text-gray-400">
|
|
<span class="text-5xl">Empty</span>
|
|
<p class="text-sm mt-2">Belum ada ucapan. Jadilah yang pertama!</p>
|
|
</div>
|
|
</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>
|
|
|
|
<style scoped>
|
|
.space-y-4 > div:last-child hr {
|
|
display: none;
|
|
}
|
|
</style> |