From a4f85c53c5bba486924129930a8461463a25a920 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Tue, 6 Jan 2026 11:13:26 +0700
Subject: [PATCH] feat: Introduce custom Livewire pagination component and
 apply it to news and announcements, enhancing list rendering with `wire:key`.

---
 .../livewire/home/announcements.blade.php     |  6 +-
 .../livewire/home/custom-pagination.blade.php | 57 +++++++++++++++++++
 .../views/livewire/home/news/index.blade.php  |  4 +-
 3 files changed, 62 insertions(+), 5 deletions(-)
 create mode 100644 resources/views/livewire/home/custom-pagination.blade.php

diff --git a/resources/views/livewire/home/announcements.blade.php b/resources/views/livewire/home/announcements.blade.php
index 40d21dc..e521fc5 100644
--- a/resources/views/livewire/home/announcements.blade.php
+++ b/resources/views/livewire/home/announcements.blade.php
@@ -31,11 +31,11 @@ class="bi bi-megaphone text-white icon-small me-10px"></i>{{ $pageTitle }}</span
         <div class="container">
             <div class="row">
                 <div class="col-12">
-                    <ul class="blog-wrapper grid-loading grid grid-1col gutter-extra-large">
+                    <ul class="blog-wrapper grid grid-1col gutter-extra-large">
                         <li class="grid-sizer"></li>
                         <!-- start blog item -->
                         @foreach ($announcements as $announcement)
-                            <li class="grid-item">
+                            <li class="grid-item" wire:key="announcement-{{ $announcement->id }}">
                                 <div
                                     class="card border-0 border-radius-4px overflow-hidden box-shadow-quadruple-large box-shadow-quadruple-large-hover">
                                     <div class="card-body p-0">
@@ -63,7 +63,7 @@ class="card-title mb-10px fw-600 fs-19 lh-28 text-dark-gray text-primary-hover">
                     </ul>
                 </div>
                 <div class="col-12 mt-4 d-flex justify-content-center">
-                    {{ $announcements->links() }}
+                    {{ $announcements->links('livewire.home.custom-pagination') }}
                 </div>
             </div>
         </div>
diff --git a/resources/views/livewire/home/custom-pagination.blade.php b/resources/views/livewire/home/custom-pagination.blade.php
new file mode 100644
index 0000000..bb5d632
--- /dev/null
+++ b/resources/views/livewire/home/custom-pagination.blade.php
@@ -0,0 +1,57 @@
+@if ($paginator->hasPages())
+    <ul class="pagination pagination-style-01 fs-13 fw-500 mb-0">
+        {{-- Previous Page Link --}}
+        @if ($paginator->onFirstPage())
+            <li class="page-item disabled" aria-disabled="true">
+                <span class="page-link">
+                    <i class="feather icon-feather-arrow-left fs-18 d-xs-none"></i>
+                </span>
+            </li>
+        @else
+            <li class="page-item">
+                <a class="page-link" href="javascript:void(0)" wire:click="previousPage" rel="prev">
+                    <i class="feather icon-feather-arrow-left fs-18 d-xs-none"></i>
+                </a>
+            </li>
+        @endif
+
+        {{-- Pagination Elements --}}
+        @foreach ($elements as $element)
+            {{-- "Three Dots" Separator --}}
+            @if (is_string($element))
+                <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span>
+                </li>
+            @endif
+
+            {{-- Array Of Links --}}
+            @if (is_array($element))
+                @foreach ($element as $page => $url)
+                    @if ($page == $paginator->currentPage())
+                        <li class="page-item active" aria-current="page"><span
+                                class="page-link">{{ sprintf('%02d', $page) }}</span></li>
+                    @else
+                        <li class="page-item">
+                            <a class="page-link" href="javascript:void(0)"
+                                wire:click="gotoPage({{ $page }})">{{ sprintf('%02d', $page) }}</a>
+                        </li>
+                    @endif
+                @endforeach
+            @endif
+        @endforeach
+
+        {{-- Next Page Link --}}
+        @if ($paginator->hasMorePages())
+            <li class="page-item">
+                <a class="page-link" href="javascript:void(0)" wire:click="nextPage" rel="next">
+                    <i class="feather icon-feather-arrow-right fs-18 d-xs-none"></i>
+                </a>
+            </li>
+        @else
+            <li class="page-item disabled" aria-disabled="true">
+                <span class="page-link">
+                    <i class="feather icon-feather-arrow-right fs-18 d-xs-none"></i>
+                </span>
+            </li>
+        @endif
+    </ul>
+@endif
diff --git a/resources/views/livewire/home/news/index.blade.php b/resources/views/livewire/home/news/index.blade.php
index f11ac5f..357b304 100644
--- a/resources/views/livewire/home/news/index.blade.php
+++ b/resources/views/livewire/home/news/index.blade.php
@@ -33,7 +33,7 @@ class="bi bi-megaphone text-white icon-small me-10px"></i>{{ $pageTitle }}</span
                 <div class="col-12 col-lg-8 blog-standard md-mb-50px sm-mb-40px">
                     @forelse($news as $item)
                         <!-- start blog item -->
-                        <div class="col-12 mb-40px">
+                        <div class="col-12 mb-40px" wire:key="news-{{ $item->id }}">
                             <div class="card border-0 no-border-radius box-shadow-extra-large">
                                 @if ($item->thumbnail)
                                     <div class="blog-image">
@@ -78,7 +78,7 @@ class="bg-base-color"></span></a>
                     @endforelse
 
                     <div class="col-12 mt-8 d-flex justify-content-center">
-                        {{ $news->links() }}
+                        {{ $news->links('livewire.home.custom-pagination') }}
                     </div>
                 </div>
                 <!-- start sidebar -->