Update profile pages design
This commit is contained in:
@@ -1,101 +1,108 @@
|
||||
<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="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">
|
||||
<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">
|
||||
<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 -->
|
||||
<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>
|
||||
{{-- 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-4">
|
||||
@forelse ($comments as $comment)
|
||||
{{-- Comments --}}
|
||||
<div class="space-y-3">
|
||||
@forelse ($comments as $comment)
|
||||
|
||||
@php
|
||||
$model = $comment->commentable;
|
||||
$episode = $model instanceof \App\Models\Episode
|
||||
? $model
|
||||
: $model->episodes->first();
|
||||
@php
|
||||
$model = $comment->commentable;
|
||||
$episode = $model instanceof \App\Models\Episode
|
||||
? $model
|
||||
: $model->episodes->first();
|
||||
|
||||
$url = route('hentai.index', ['title' => $model->slug]);
|
||||
@endphp
|
||||
$url = route('hentai.index', ['title' => $model->slug]);
|
||||
@endphp
|
||||
|
||||
<a href="{{ $url }}#comment-{{ $comment->id }}"
|
||||
wire:key="comment-{{ $comment->id }}"
|
||||
class="block group">
|
||||
<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="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">
|
||||
<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"
|
||||
>
|
||||
{{-- 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>
|
||||
|
||||
<!-- 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>
|
||||
{{-- 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>
|
||||
</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>
|
||||
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user