78 lines
2.8 KiB
PHP
78 lines
2.8 KiB
PHP
@props(['currentPage', 'totalPages'])
|
|
|
|
@if ($totalPages > 1)
|
|
<nav class="flex justify-center mt-4">
|
|
<ul class="inline-flex space-x-1 items-center">
|
|
|
|
{{-- Previous --}}
|
|
<li>
|
|
<button
|
|
wire:click="setPage({{ max(1, $currentPage - 1) }})"
|
|
class="px-3 py-1 border rounded {{ $currentPage === 1 ? 'bg-gray-200 cursor-not-allowed' : 'bg-white hover:bg-gray-100' }}"
|
|
{{ $currentPage === 1 ? 'disabled' : '' }}
|
|
>
|
|
Prev
|
|
</button>
|
|
</li>
|
|
|
|
@php
|
|
$start = max(1, min($currentPage - 2, $totalPages - 4));
|
|
$end = min($totalPages, $start + 4);
|
|
@endphp
|
|
|
|
{{-- Leading Pages --}}
|
|
@if ($start > 1)
|
|
<li>
|
|
<button
|
|
wire:click="setPage(1)"
|
|
class="px-3 py-1 border rounded {{ $currentPage === 1 ? 'bg-orange-500 text-white' : 'bg-white hover:bg-gray-100' }}"
|
|
>
|
|
1
|
|
</button>
|
|
</li>
|
|
@if ($start > 2)
|
|
<li><span class="px-2">...</span></li>
|
|
@endif
|
|
@endif
|
|
|
|
{{-- Main Range --}}
|
|
@for ($i = $start; $i <= $end; $i++)
|
|
<li>
|
|
<button
|
|
wire:click="setPage({{ $i }})"
|
|
class="px-3 py-1 border rounded {{ $currentPage === $i ? 'bg-orange-500 text-white' : 'bg-white hover:bg-gray-100' }}"
|
|
>
|
|
{{ $i }}
|
|
</button>
|
|
</li>
|
|
@endfor
|
|
|
|
{{-- Trailing Pages --}}
|
|
@if ($end < $totalPages)
|
|
@if ($end < $totalPages - 1)
|
|
<li><span class="px-2">...</span></li>
|
|
@endif
|
|
<li>
|
|
<button
|
|
wire:click="setPage({{ $totalPages }})"
|
|
class="px-3 py-1 border rounded {{ $currentPage === $totalPages ? 'bg-orange-500 text-white' : 'bg-white hover:bg-gray-100' }}"
|
|
>
|
|
{{ $totalPages }}
|
|
</button>
|
|
</li>
|
|
@endif
|
|
|
|
{{-- Next --}}
|
|
<li>
|
|
<button
|
|
wire:click="setPage({{ min($totalPages, $currentPage + 1) }})"
|
|
class="px-3 py-1 border rounded {{ $currentPage === $totalPages ? 'bg-gray-200 cursor-not-allowed' : 'bg-white hover:bg-gray-100' }}"
|
|
{{ $currentPage === $totalPages ? 'disabled' : '' }}
|
|
>
|
|
Next
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
@endif
|