naser/libra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

complete story 9.9 with qa test

Browse Source
This commit is contained in:
Naser Mansour
2026-01-03 02:39:33 +02:00
parent 9abaa93a49
commit 9228921669
16 changed files with 968 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/livewire/pages/posts/index.blade.php
+14 -14
View File
@@ -55,15 +55,15 @@ new #[Layout('components.layouts.public')] class extends Component
}
}; ?>
<div class="max-w-4xl mx-auto">
<flux:heading size="xl" class="text-navy">{{ __('posts.posts') }}</flux:heading>
<div class="max-w-4xl mx-auto px-0">
<flux:heading size="xl" class="text-navy text-xl sm:text-2xl lg:text-3xl">{{ __('posts.posts') }}</flux:heading>
<!-- Search Bar -->
<div class="mt-6 relative">
<div class="mt-4 sm:mt-6 relative">
<flux:input
wire:model.live.debounce.300ms="search"
placeholder="{{ __('posts.search_placeholder') }}"
class="w-full"
class="w-full min-h-[44px]"
>
<x-slot:iconLeading>
<flux:icon name="magnifying-glass" class="w-5 h-5 text-charcoal/50" />
@@ -73,7 +73,7 @@ new #[Layout('components.layouts.public')] class extends Component
@if($search)
<button
wire:click="clearSearch"
class="absolute end-3 top-1/2 -translate-y-1/2 text-charcoal/50 hover:text-charcoal"
class="absolute end-3 top-1/2 -translate-y-1/2 text-charcoal/50 hover:text-charcoal min-h-[44px] min-w-[44px] flex items-center justify-center"
>
<flux:icon name="x-mark" class="w-5 h-5" />
</button>
@@ -92,10 +92,10 @@ new #[Layout('components.layouts.public')] class extends Component
@endif
<!-- Posts List -->
<div class="mt-8 space-y-6">
<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-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<h2 class="text-xl font-semibold text-navy">
<article wire:key="post-{{ $post->id }}" class="bg-white p-4 sm:p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<h2 class="text-lg sm:text-xl font-semibold text-navy">
<a href="{{ route('posts.show', $post) }}" class="hover:text-gold" wire:navigate>
@if($search)
{!! $this->highlightSearch($post->getTitle(), $search) !!}
@@ -105,11 +105,11 @@ new #[Layout('components.layouts.public')] class extends Component
</a>
</h2>
<time class="text-sm text-charcoal/70 mt-2 block">
<time class="text-xs sm:text-sm text-charcoal/70 mt-2 block">
{{ $post->published_at?->translatedFormat('d F Y') ?? $post->created_at->translatedFormat('d F Y') }}
</time>
<p class="mt-3 text-charcoal">
<p class="mt-2 sm:mt-3 text-charcoal text-sm sm:text-base">
@if($search)
{!! $this->highlightSearch($post->getExcerpt(), $search) !!}
@else
@@ -117,20 +117,20 @@ new #[Layout('components.layouts.public')] class extends Component
@endif
</p>
<a href="{{ route('posts.show', $post) }}" class="text-gold hover:underline mt-4 inline-block" wire:navigate>
<a href="{{ route('posts.show', $post) }}" class="text-gold hover:underline mt-3 sm:mt-4 inline-flex items-center min-h-[44px]" wire:navigate>
{{ __('posts.read_more') }} &rarr;
</a>
</article>
@empty
<div class="text-center py-12 bg-white rounded-lg">
<div class="empty-state bg-white rounded-lg">
@if($search)
<flux:icon name="magnifying-glass" class="w-12 h-12 mx-auto mb-4 text-charcoal/30" />
<flux:icon name="magnifying-glass" class="empty-state-icon text-charcoal/30" />
<p class="text-charcoal/70">{{ __('posts.no_results', ['query' => $search]) }}</p>
<flux:button wire:click="clearSearch" class="mt-4">
{{ __('posts.clear_search') }}
</flux:button>
@else
<flux:icon name="document-text" class="w-12 h-12 mx-auto mb-4 text-charcoal/40" />
<flux:icon name="document-text" class="empty-state-icon text-charcoal/40" />
<p class="text-charcoal/70">{{ __('posts.no_posts') }}</p>
@endif
</div>