24-8: articles and legal pages — implemented, QA Review
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Naser Mansour
@@ -55,91 +55,44 @@ new #[Layout('components.layouts.public')] class extends Component
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div class="wrap py-8">
|
||||
<div class="max-w-4xl mx-auto px-0">
|
||||
<flux:heading size="xl" class="text-body text-xl sm:text-2xl lg:text-3xl">{{ __('posts.posts') }}</flux:heading>
|
||||
|
||||
<!-- Search Bar -->
|
||||
<div class="mt-4 sm:mt-6 relative">
|
||||
<flux:input
|
||||
wire:model.live.debounce.300ms="search"
|
||||
placeholder="{{ __('posts.search_placeholder') }}"
|
||||
class="w-full min-h-[44px]"
|
||||
>
|
||||
<x-slot:iconLeading>
|
||||
<flux:icon name="magnifying-glass" class="w-5 h-5 text-body/50" />
|
||||
</x-slot:iconLeading>
|
||||
</flux:input>
|
||||
<section class="sec" style="padding-top:56px">
|
||||
<div class="wrap">
|
||||
<x-site.section-head tag="h1" :label="__('site.hero_eyebrow')" :title="__('site.nav_articles')">
|
||||
<div style="position:relative">
|
||||
<label class="sr-only" for="posts-search">{{ __('posts.search_placeholder') }}</label>
|
||||
<input
|
||||
id="posts-search"
|
||||
type="search"
|
||||
class="search"
|
||||
wire:model.live.debounce.300ms="search"
|
||||
placeholder="{{ __('posts.search_placeholder') }}"
|
||||
>
|
||||
</div>
|
||||
</x-site.section-head>
|
||||
|
||||
@if($search)
|
||||
<button
|
||||
wire:click="clearSearch"
|
||||
class="absolute end-3 top-1/2 -translate-y-1/2 text-body/50 hover:text-body min-h-[44px] min-w-[44px] flex items-center justify-center"
|
||||
>
|
||||
<flux:icon name="x-mark" class="w-5 h-5" />
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Search Results Info -->
|
||||
@if($search)
|
||||
<p class="mt-4 text-sm text-body/70">
|
||||
@if($posts->total() > 0)
|
||||
{{ __('posts.search_results', ['count' => $posts->total(), 'query' => $search]) }}
|
||||
@else
|
||||
{{ __('posts.no_results', ['query' => $search]) }}
|
||||
@endif
|
||||
</p>
|
||||
@endif
|
||||
|
||||
<!-- Posts List -->
|
||||
<div class="mt-6 sm:mt-8 space-y-4 sm:space-y-6">
|
||||
@forelse($posts as $post)
|
||||
<article wire:key="post-{{ $post->id }}" class="bg-card p-4 sm:p-6 rounded-lg shadow-card hover:shadow-card-hover transition-shadow">
|
||||
<h2 class="text-lg sm:text-xl font-semibold text-text">
|
||||
<a href="{{ route('posts.show', $post) }}" class="hover:text-cta" wire:navigate>
|
||||
@if($search)
|
||||
{!! $this->highlightSearch($post->getTitle(), $search) !!}
|
||||
@else
|
||||
{{ $post->getTitle() }}
|
||||
@endif
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<time class="text-xs sm:text-sm text-body/70 mt-2 block">
|
||||
{{ $post->published_at?->translatedFormat('d F Y') ?? $post->created_at->translatedFormat('d F Y') }}
|
||||
</time>
|
||||
|
||||
<p class="mt-2 sm:mt-3 text-body text-sm sm:text-base">
|
||||
@if($search)
|
||||
{!! $this->highlightSearch($post->getExcerpt(), $search) !!}
|
||||
@else
|
||||
{{ $post->getExcerpt() }}
|
||||
@endif
|
||||
</p>
|
||||
|
||||
<a href="{{ route('posts.show', $post) }}" class="text-cta hover:text-cta-hover hover:underline mt-3 sm:mt-4 inline-flex items-center min-h-[44px]" wire:navigate>
|
||||
{{ __('posts.read_more') }} →
|
||||
</a>
|
||||
</article>
|
||||
@empty
|
||||
<div class="empty-state bg-card rounded-lg">
|
||||
@if($search)
|
||||
<flux:icon name="magnifying-glass" class="empty-state-icon text-body/30" />
|
||||
<p class="text-body/70">{{ __('posts.no_results', ['query' => $search]) }}</p>
|
||||
<flux:button wire:click="clearSearch" class="mt-4">
|
||||
{{ __('posts.clear_search') }}
|
||||
</flux:button>
|
||||
<p class="search-info">
|
||||
@if($posts->total() > 0)
|
||||
{{ __('posts.search_results', ['count' => $posts->total(), 'query' => $search]) }}
|
||||
@else
|
||||
<flux:icon name="document-text" class="empty-state-icon text-body/40" />
|
||||
<p class="text-body/70">{{ __('posts.no_posts') }}</p>
|
||||
{{ __('posts.no_results', ['query' => $search]) }}
|
||||
@endif
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
<button type="button" class="btn btn-ghost" wire:click="clearSearch">{{ __('posts.clear_search') }}</button>
|
||||
</p>
|
||||
@endif
|
||||
|
||||
<div class="mt-8">
|
||||
{{ $posts->links() }}
|
||||
@if($posts->count() > 0)
|
||||
<div class="posts posts-index">
|
||||
@foreach($posts as $post)
|
||||
<x-site.post-card :post="$post" wire:key="post-{{ $post->id }}" />
|
||||
@endforeach
|
||||
</div>
|
||||
@elseif(! $search)
|
||||
<p class="text-center" style="color:var(--muted)">{{ __('posts.no_posts') }}</p>
|
||||
@endif
|
||||
|
||||
<div class="pagination-wrap">
|
||||
{{ $posts->links() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user