102 lines
4.5 KiB
PHP
102 lines
4.5 KiB
PHP
<div>
|
|
<div class="mx-auto max-w-5xl px-4 space-y-6">
|
|
|
|
<!-- Filters -->
|
|
<div class="p-4 bg-white/40 dark:bg-neutral-950/40 backdrop-blur rounded-xl shadow flex flex-col sm:flex-row gap-3">
|
|
|
|
<!-- Search -->
|
|
<div class="relative flex-1">
|
|
<input
|
|
wire:model.live.debounce.500ms="commentSearch"
|
|
type="search"
|
|
placeholder="Search comments..."
|
|
class="w-full pl-10 pr-4 py-3 rounded-lg border-neutral-300 dark:text-neutral-300 bg-white/80 dark:bg-neutral-900/50 dark:border-neutral-700 focus:outline-none focus:ring-2 focus:ring-rose-600 focus:border-rose-700 transition"
|
|
>
|
|
<div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
|
|
<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>
|
|
</div>
|
|
|
|
<!-- Order -->
|
|
<select
|
|
wire:model.live="order"
|
|
class="px-4 py-3 rounded-lg border-neutral-300 dark:text-gray-300 bg-white/80 dark:bg-neutral-900/50 dark:border-neutral-700 min-w-[128px]"
|
|
>
|
|
<option value="created_at_desc">Newest</option>
|
|
<option value="created_at_asc">Oldest</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Comments -->
|
|
<div class="space-y-4">
|
|
@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="bg-white/40 dark:bg-neutral-950/40 backdrop-blur rounded-xl shadow hover:shadow-lg transition overflow-hidden">
|
|
|
|
<div class="flex flex-col sm:flex-row">
|
|
|
|
<!-- Thumbnail -->
|
|
<div class="sm:w-48 shrink-0">
|
|
<img
|
|
src="{{ $episode->gallery->first()->thumbnail_url }}"
|
|
alt=""
|
|
class="w-full h-40 sm:h-full object-cover"
|
|
>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="flex-1 p-4 flex flex-col justify-between">
|
|
|
|
<!-- Comment -->
|
|
<div class="text-gray-800 dark:text-gray-200 text-sm line-clamp-3">
|
|
{!! $comment->presenter()->markdownBody() !!}
|
|
</div>
|
|
|
|
<!-- Meta -->
|
|
<div class="flex items-center justify-between mt-3 text-xs text-gray-700 dark:text-gray-400">
|
|
|
|
<span>
|
|
{{ $comment->presenter()->relativeCreatedAt() }}
|
|
</span>
|
|
|
|
<span class="text-rose-600 font-medium group-hover:underline">
|
|
View comment
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
@empty
|
|
<div class="flex bg-white/40 dark:bg-neutral-950/40 backdrop-blur rounded-xl shadow hover:shadow-lg transition overflow-hidden">
|
|
<div class="text-gray-800 dark:text-gray-200 text-center w-full p-4">
|
|
<p class="text-lg">No results</p>
|
|
<p class="text-sm opacity-70">(╥﹏╥)</p>
|
|
</div>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div>
|
|
{{ $comments->links('pagination::tailwind') }}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|