libra/resources/views/livewire/pages/posts/index.blade.php

58 lines
1.8 KiB
PHP

<?php
use App\Models\Post;
use Livewire\Attributes\Layout;
use Livewire\Volt\Component;
use Livewire\WithPagination;
new #[Layout('components.layouts.public')] class extends Component
{
use WithPagination;
public function with(): array
{
return [
'posts' => Post::published()
->latest()
->paginate(10),
];
}
}; ?>
<div class="max-w-4xl mx-auto">
<flux:heading size="xl" class="text-navy">{{ __('posts.posts') }}</flux:heading>
<div class="mt-8 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">
<a href="{{ route('posts.show', $post) }}" class="hover:text-gold" wire:navigate>
{{ $post->getTitle() }}
</a>
</h2>
<time class="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">
{{ $post->getExcerpt() }}
</p>
<a href="{{ route('posts.show', $post) }}" class="text-gold hover:underline mt-4 inline-block" wire:navigate>
{{ __('posts.read_more') }} &rarr;
</a>
</article>
@empty
<div class="text-center text-charcoal/70 py-12 bg-white rounded-lg">
<flux:icon name="document-text" class="w-12 h-12 mx-auto mb-4 text-charcoal/40" />
<p>{{ __('posts.no_posts') }}</p>
</div>
@endforelse
</div>
<div class="mt-8">
{{ $posts->links() }}
</div>
</div>