mirror of
https://github.com/rico-vz/HeimerdingerLoL.git
synced 2025-12-06 18:20:48 +01:00
feat: add working posts index
This commit adds pagination functionality to the posts index page. The code changes include: - Sorting the posts by descending date - Paginating the posts with 6 items per page - Creating a new component called "Listposts" for rendering the paginated posts - Adding a new view file for the "Listposts" component - Updating the blade template of the posts index page to use the "Listposts" component and pass in the paginated posts The purpose of these changes is to improve user experience by displaying a limited number of posts per page and providing navigation links for easier browsing.
This commit is contained in:
24
resources/views/components/posts/listposts.blade.php
Normal file
24
resources/views/components/posts/listposts.blade.php
Normal file
@@ -0,0 +1,24 @@
|
||||
@php use Carbon\Carbon; @endphp
|
||||
<div class="container mx-auto p-4 flex flex-col items-center justify-center mt-3">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 auto-cols-max w-full">
|
||||
@foreach($posts as $post)
|
||||
<article class="inline-block text-gray-200 bg-stone-800/40 shadow-md rounded-2xl border border-stone-800
|
||||
hover:border-orange-500/10 hover:shadow-orange-500/10 items-center h-80 relative">
|
||||
<span
|
||||
class="absolute top-4 left-4 text-sm text-gray-100 font-medium bg-black/60 px-1 py-1 rounded-lg">
|
||||
<abbr itemprop="datePublished">{{ Carbon::parse($post->date)->format('F d, Y') }}</abbr>
|
||||
</span>
|
||||
<img src="{{ $post->thumbnail }}" alt="Post Thumbnail" class="w-full h-48 object-cover rounded-t-2xl">
|
||||
<div class="p-4">
|
||||
<h2 class="text-xl font-bold mb-2 line-clamp-1" itemprop="name">{{ $post->title }}</h2>
|
||||
<p class="text-sm line-clamp-3" itemprop="headline">{{ $post->description }}</p>
|
||||
</div>
|
||||
<a href="{{ route('posts.show', $post->slug)}}" itemprop="url"
|
||||
class="absolute bottom-4 right-4 text-sm text-orange-400 hover:text-orange-600">Read more</a>
|
||||
</article>
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
{{ $posts->links() }}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user