109 lines
5.4 KiB
PHP
109 lines
5.4 KiB
PHP
<div class="space-y-5">
|
|
{{-- Filters --}}
|
|
<div class="rounded-2xl border border-neutral-200/70 bg-white/80 p-4 shadow-sm backdrop-blur-xl dark:border-neutral-800/70 dark:bg-neutral-950/70">
|
|
<div class="flex flex-col sm:flex-row gap-3">
|
|
{{-- Search --}}
|
|
<div class="relative flex-1">
|
|
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
|
<svg class="w-4 h-4 text-gray-400 dark:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
|
|
</svg>
|
|
</div>
|
|
<input
|
|
wire:model.live.debounce.500ms="commentSearch"
|
|
type="search"
|
|
placeholder="Search comments..."
|
|
class="w-full pl-10 pr-4 py-2.5 rounded-xl border-neutral-300 dark:text-neutral-300 bg-white dark:bg-neutral-900 dark:border-neutral-700 focus:outline-none focus:ring-2 focus:ring-rose-600 focus:border-rose-700 transition"
|
|
>
|
|
</div>
|
|
|
|
{{-- Order --}}
|
|
<div class="relative">
|
|
<i class="fa-solid fa-sort pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400"></i>
|
|
<select
|
|
wire:model.live="order"
|
|
class="appearance-none pl-10 pr-8 py-2.5 rounded-xl border-neutral-300 dark:text-gray-300 bg-white dark:bg-neutral-900 dark:border-neutral-700 min-w-[128px]"
|
|
>
|
|
<option value="created_at_desc">Newest</option>
|
|
<option value="created_at_asc">Oldest</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Comments --}}
|
|
<div class="space-y-3">
|
|
@forelse ($comments as $comment)
|
|
|
|
@php
|
|
$model = $comment->commentable;
|
|
$episode = $model instanceof \App\Models\Episode
|
|
? $model
|
|
: $model->episodes->first();
|
|
|
|
$url = route('hentai.index', ['title' => $model->slug]);
|
|
@endphp
|
|
|
|
<a href="{{ $url }}#comment-{{ $comment->id }}"
|
|
wire:key="comment-{{ $comment->id }}"
|
|
class="block group">
|
|
|
|
<div class="rounded-xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 hover:shadow-md hover:ring-rose-300/50 dark:hover:ring-rose-700/30 transition-all duration-200 overflow-hidden">
|
|
|
|
<div class="flex flex-col sm:flex-row">
|
|
|
|
{{-- Thumbnail --}}
|
|
<div class="sm:w-44 shrink-0">
|
|
<img
|
|
src="{{ $episode->gallery->first()->thumbnail_url }}"
|
|
alt="{{ $episode->title ?? '' }}"
|
|
class="w-full h-36 sm:h-full object-cover"
|
|
loading="lazy"
|
|
>
|
|
</div>
|
|
|
|
{{-- Content --}}
|
|
<div class="flex-1 p-4 flex flex-col justify-between min-w-0">
|
|
|
|
{{-- Episode Title --}}
|
|
<p class="text-xs font-medium text-rose-600 dark:text-rose-400 truncate mb-1">
|
|
{{ $episode->title ?? 'Episode' }}
|
|
</p>
|
|
|
|
{{-- Comment --}}
|
|
<div class="text-sm text-gray-700 dark:text-gray-300 line-clamp-2 leading-relaxed">
|
|
{!! $comment->presenter()->markdownBody() !!}
|
|
</div>
|
|
|
|
{{-- Meta --}}
|
|
<div class="flex items-center justify-between mt-2.5 text-xs text-gray-500 dark:text-gray-400">
|
|
<span class="flex items-center gap-1">
|
|
<i class="fa-solid fa-clock text-[10px]"></i>
|
|
{{ $comment->presenter()->relativeCreatedAt() }}
|
|
</span>
|
|
<span class="text-rose-600 dark:text-rose-400 font-medium group-hover:underline">
|
|
View comment
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
@empty
|
|
<div class="rounded-2xl bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow-sm ring-1 ring-black/5 dark:ring-white/5 p-12 text-center">
|
|
<div class="inline-flex h-20 w-20 items-center justify-center rounded-full bg-gray-100 dark:bg-neutral-800 mb-4">
|
|
<i class="fa-solid fa-comment-slash text-3xl text-gray-400 dark:text-gray-500"></i>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">No comments found</h3>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">You haven't commented on anything yet.</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
{{-- Pagination --}}
|
|
<div>
|
|
{{ $comments->links('pagination::tailwind') }}
|
|
</div>
|
|
|
|
</div>
|