<div x-data="{
comments: [
{
name: 'Sarah Chen',
text: 'Great article! Mindful coding really helps me stay focused.',
timestamp: new Date(Date.now() - 5 * 60 * 1000).toLocaleString(),
timeAgo: '5 minutes ago'
}
],
newComment: '',
newName: '',
addComment() {
if (this.newComment.trim() && this.newName.trim()) {
this.comments.push({
name: this.newName,
text: this.newComment,
timestamp: new Date().toLocaleString(),
timeAgo: 'just now'
});
this.newComment = '';
this.newName = '';
}
}
}" class="max-w-3xl mx-auto px-4 py-8 bg-white shadow-sm">
<h2 class="text-2xl font-bold text-gray-900 mb-6">Comments</h2>
<!-- Comment Input -->
<div class="mb-6 space-y-4">
<input
x-model="newName"
placeholder="Your name"
class="w-full p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="text"
>
<textarea
x-model="newComment"
placeholder="Add your comment..."
class="w-full p-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-y"
rows="4"
></textarea>
<button
@click="addComment"
class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
Post Comment
</button>
</div>
<!-- Comments List -->
<div class="space-y-4">
<template x-for="comment in comments" :key="comment.timestamp">
<div class="border-l-4 border-blue-600 bg-gray-50 p-4 rounded-r-lg">
<div class="flex justify-between items-baseline mb-2">
<span x-text="comment.name" class="font-semibold text-gray-900"></span>
<span x-text="comment.timeAgo" class="text-sm text-gray-500"></span>
</div>
<p x-text="comment.text" class="text-gray-800"></p>
</div>
</template>
</div>
</div>