93 lines
4.0 KiB
PHP
93 lines
4.0 KiB
PHP
<section>
|
|
<div id="comments" class="overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-sm dark:border-neutral-800 dark:bg-neutral-900">
|
|
|
|
{{-- Header --}}
|
|
<div class="border-b border-neutral-200 px-6 py-5 dark:border-neutral-800">
|
|
<h2 class="text-xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-100">
|
|
Comments
|
|
</h2>
|
|
</div>
|
|
|
|
{{-- Comment Form --}}
|
|
<div class="border-b border-neutral-200 bg-neutral-50/80 px-6 py-6 dark:border-neutral-800 dark:bg-neutral-950/40">
|
|
@auth
|
|
<div class="flex gap-4">
|
|
<img
|
|
class="h-11 w-11 rounded-full object-cover ring-2 ring-white dark:ring-neutral-800"
|
|
src="{{ auth()->user()->getAvatar() }}"
|
|
alt="{{ auth()->user()->name }}"
|
|
>
|
|
|
|
<div class="flex-1">
|
|
<form wire:submit.prevent="postComment" class="space-y-4">
|
|
|
|
<div>
|
|
<label for="comment" class="sr-only">
|
|
Comment body
|
|
</label>
|
|
|
|
<textarea
|
|
id="comment"
|
|
rows="4"
|
|
wire:model.defer="newCommentState.body"
|
|
placeholder="Write a comment..."
|
|
class="w-full rounded-2xl border border-neutral-300 bg-white px-4 py-3 text-sm text-neutral-900 placeholder:text-neutral-400 shadow-sm transition focus:border-rose-500 focus:outline-none focus:ring-4 focus:ring-rose-500/10 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100 dark:placeholder:text-neutral-500 dark:focus:border-rose-500 @error('newCommentState.body') border-red-500 @enderror"
|
|
></textarea>
|
|
|
|
@error('newCommentState.body')
|
|
<p class="mt-2 text-sm text-red-500">
|
|
{{ $message }}
|
|
</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<button
|
|
type="submit"
|
|
class="inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-rose-700 focus:outline-none focus:ring-4 focus:ring-rose-500/30"
|
|
>
|
|
Post Comment
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endauth
|
|
|
|
@guest
|
|
<div class="rounded-xl border border-dashed border-neutral-300 p-6 text-center dark:border-neutral-700">
|
|
<p class="text-sm text-neutral-600 dark:text-neutral-400">
|
|
Log in to join the discussion.
|
|
</p>
|
|
</div>
|
|
@endguest
|
|
|
|
</div>
|
|
|
|
{{-- Comments --}}
|
|
<div class="px-6 py-6">
|
|
@if ($comments->isNotEmpty())
|
|
|
|
<div class="space-y-6">
|
|
@foreach($comments as $comment)
|
|
<livewire:comment :comment="$comment" :key="$comment->id"/>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="mt-8">
|
|
{{ $comments->links('pagination::tailwind') }}
|
|
</div>
|
|
|
|
@else
|
|
|
|
<div class="rounded-2xl border border-dashed border-neutral-300 py-12 text-center dark:border-neutral-700">
|
|
<p class="text-neutral-500 dark:text-neutral-400">
|
|
No comments yet.
|
|
</p>
|
|
</div>
|
|
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</section> |