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

complete story 12.3

Browse Source
This commit is contained in:
Naser Mansour
2026-01-04 00:38:55 +02:00
parent c855b7b159
commit 74eacd53ae
16 changed files with 167 additions and 119 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
@@ -33,7 +33,7 @@ new #[Layout('components.layouts.public')] class extends Component
return preg_replace(
'/('.preg_quote($escapedSearch, '/').')/iu',
'<mark class="bg-warm-gray/30 rounded px-1">$1</mark>',
'<mark class="bg-accent/30 rounded px-1">$1</mark>',
$escapedText
);
}
@@ -56,7 +56,7 @@ new #[Layout('components.layouts.public')] class extends Component
}; ?>
<div class="max-w-4xl mx-auto px-0">
<flux:heading size="xl" class="text-charcoal text-xl sm:text-2xl lg:text-3xl">{{ __('posts.posts') }}</flux:heading>
<flux:heading size="xl" class="text-text text-xl sm:text-2xl lg:text-3xl">{{ __('posts.posts') }}</flux:heading>
<!-- Search Bar -->
<div class="mt-4 sm:mt-6 relative">
@@ -66,14 +66,14 @@ new #[Layout('components.layouts.public')] class extends Component
class="w-full min-h-[44px]"
>
<x-slot:iconLeading>
<flux:icon name="magnifying-glass" class="w-5 h-5 text-charcoal/50" />
<flux:icon name="magnifying-glass" class="w-5 h-5 text-text/50" />
</x-slot:iconLeading>
</flux:input>
@if($search)
<button
wire:click="clearSearch"
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"
class="absolute end-3 top-1/2 -translate-y-1/2 text-text/50 hover:text-text min-h-[44px] min-w-[44px] flex items-center justify-center"
>
<flux:icon name="x-mark" class="w-5 h-5" />
</button>
@@ -82,7 +82,7 @@ new #[Layout('components.layouts.public')] class extends Component
<!-- Search Results Info -->
@if($search)
<p class="mt-4 text-sm text-charcoal/70">
<p class="mt-4 text-sm text-text/70">
@if($posts->total() > 0)
{{ __('posts.search_results', ['count' => $posts->total(), 'query' => $search]) }}
@else
@@ -95,8 +95,8 @@ new #[Layout('components.layouts.public')] class extends Component
<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-4 sm:p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<h2 class="text-lg sm:text-xl font-semibold text-charcoal">
<a href="{{ route('posts.show', $post) }}" class="hover:text-warm-gray" wire:navigate>
<h2 class="text-lg sm:text-xl font-semibold text-text">
<a href="{{ route('posts.show', $post) }}" class="hover:text-primary" wire:navigate>
@if($search)
{!! $this->highlightSearch($post->getTitle(), $search) !!}
@else
@@ -105,11 +105,11 @@ new #[Layout('components.layouts.public')] class extends Component
</a>
</h2>
<time class="text-xs sm:text-sm text-charcoal/70 mt-2 block">
<time class="text-xs sm:text-sm text-text/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-charcoal text-sm sm:text-base">
<p class="mt-2 sm:mt-3 text-text text-sm sm:text-base">
@if($search)
{!! $this->highlightSearch($post->getExcerpt(), $search) !!}
@else
@@ -117,21 +117,21 @@ new #[Layout('components.layouts.public')] class extends Component
@endif
</p>
<a href="{{ route('posts.show', $post) }}" class="text-warm-gray hover:underline mt-3 sm:mt-4 inline-flex items-center min-h-[44px]" wire:navigate>
<a href="{{ route('posts.show', $post) }}" class="text-primary 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="empty-state bg-white rounded-lg">
@if($search)
<flux:icon name="magnifying-glass" class="empty-state-icon text-charcoal/30" />
<p class="text-charcoal/70">{{ __('posts.no_results', ['query' => $search]) }}</p>
<flux:icon name="magnifying-glass" class="empty-state-icon text-text/30" />
<p class="text-text/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="empty-state-icon text-charcoal/40" />
<p class="text-charcoal/70">{{ __('posts.no_posts') }}</p>
<flux:icon name="document-text" class="empty-state-icon text-text/40" />
<p class="text-text/70">{{ __('posts.no_posts') }}</p>
@endif
</div>
@endforelse