Very straight-to-point article. Really worth time reading. Thank you! But tools are just the instruments for the UX designers. The knowledge of the design tools are as important as the creation of the design strategy.
Comment with Replies using TailwindCSS & Livewire
Tailwind CSS New Livewire
Demo
Discussion (8)
Much appreciated! Glad you liked it ☺️
Hope you are doing well.
TALL Stack is so cool.
This comment component is built using Livewire/Alpine and Tailwind CSS.
This is a comment.
This is a another comment.
This is a pro component. Get Livewiredemos pro access to view / download the component code.
Component Class
'$refresh',
'deleteComment' => 'confirmDelete',
'refreshComponent' => '$refresh'
];
protected $rules = [
'newComment' => 'required|min:6',
'editComment' => 'required|min:6',
'replyComment' => 'required|min:6',
];
public function render()
{
return view("livewire.pro.comment-components." . $this->view, [
'comments' => $this->model->comments()->latest()->paginate(6),
]);
}
public function mount()
{
$this->user = Auth::user();
}
public function postComment()
{
if (!Auth::check())
return;
$this->validateOnly('newComment');
$this->model->comment($this->newComment);
$this->reset('newComment');
$this->model = $this->model->refresh();
}
public function replyComment()
{
if (!Auth::check())
return;
$this->validateOnly('replyComment');
$this->replyTo->comment($this->replyComment);
$this->reset('replyComment');
$this->emit('replyAdded');
$this->replyTo = null;
}
public function selectCommentToReply(Comment $comment)
{
$this->replyTo = $comment;
}
public function cancelReply(Comment $comment)
{
$this->replyTo = null;
}
public function hydrate()
{
$this->resetErrorBag();
$this->resetValidation();
}
public function editComment(Comment $comment)
{
$this->editCommentModel = $comment;
$this->editComment = $comment->comment;
}
public function cancelEditing()
{
$this->editCommentModel = null;
}
public function editReply(Comment $comment)
{
$this->editComment = $comment->comment;
}
public function updateComment(Comment $comment)
{
if (!Auth::check())
return;
$this->validateOnly('editComment');
$comment->update([
'comment' => $this->editComment,
]);
$this->reset('editComment');
$this->model = $this->model->refresh();
}
}
Component View File
Discussion ({{ $model->comments->count() }})
@auth