82 lines
3.2 KiB
PHP
82 lines
3.2 KiB
PHP
@props([
|
|
'currentPage' => 1,
|
|
'totalPages' => 10,
|
|
'showFirstLast' => true,
|
|
'maxVisible' => 5,
|
|
])
|
|
|
|
@php
|
|
$hasPrevious = $currentPage > 1;
|
|
$hasNext = $currentPage < $totalPages;
|
|
|
|
// Berechne sichtbare Seitenzahlen
|
|
$visiblePages = [];
|
|
|
|
if ($totalPages <= $maxVisible) {
|
|
// Zeige alle Seiten wenn weniger als maxVisible
|
|
$visiblePages = range(1, $totalPages);
|
|
} else {
|
|
// Berechne dynamischen Bereich
|
|
$start = max(1, $currentPage - floor($maxVisible / 2));
|
|
$end = min($totalPages, $start + $maxVisible - 1);
|
|
|
|
// Korrigiere Start wenn am Ende
|
|
if ($end - $start < $maxVisible - 1) {
|
|
$start = max(1, $end - $maxVisible + 1);
|
|
}
|
|
|
|
$visiblePages = range($start, $end);
|
|
}
|
|
|
|
$showStartEllipsis = $visiblePages[0] > 1;
|
|
$showEndEllipsis = end($visiblePages) < $totalPages;
|
|
@endphp
|
|
|
|
<nav class="flex justify-center mt-12" aria-label="Seitennummerierung">
|
|
<div class="flex items-center gap-2">
|
|
<!-- Vorherige Seite -->
|
|
<button
|
|
class="pagination-btn pagination-nav {{ !$hasPrevious ? 'disabled:opacity-50 disabled:cursor-not-allowed' : '' }}"
|
|
{{ !$hasPrevious ? 'disabled' : '' }} aria-label="Vorherige Seite"
|
|
@if ($hasPrevious) onclick="window.location.href='?page={{ $currentPage - 1 }}'" @endif>
|
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Erste Seite + Ellipsis -->
|
|
@if ($showStartEllipsis && $showFirstLast)
|
|
<button class="pagination-btn" onclick="window.location.href='?page=1'">
|
|
1
|
|
</button>
|
|
<span class="px-2 text-zinc-600 dark:text-zinc-400">...</span>
|
|
@endif
|
|
|
|
<!-- Sichtbare Seitenzahlen -->
|
|
@foreach ($visiblePages as $page)
|
|
<button class="pagination-btn {{ $page === $currentPage ? 'pagination-active' : '' }}"
|
|
{{ $page === $currentPage ? 'aria-current="page"' : '' }}
|
|
@if ($page !== $currentPage) onclick="window.location.href='?page={{ $page }}'" @endif>
|
|
{{ $page }}
|
|
</button>
|
|
@endforeach
|
|
|
|
<!-- Ellipsis + Letzte Seite -->
|
|
@if ($showEndEllipsis && $showFirstLast)
|
|
<span class="px-2 text-zinc-600 dark:text-zinc-400">...</span>
|
|
<button class="pagination-btn" onclick="window.location.href='?page={{ $totalPages }}'">
|
|
{{ $totalPages }}
|
|
</button>
|
|
@endif
|
|
|
|
<!-- Nächste Seite -->
|
|
<button
|
|
class="pagination-btn pagination-nav {{ !$hasNext ? 'disabled:opacity-50 disabled:cursor-not-allowed' : '' }}"
|
|
{{ !$hasNext ? 'disabled' : '' }} aria-label="Nächste Seite"
|
|
@if ($hasNext) onclick="window.location.href='?page={{ $currentPage + 1 }}'" @endif>
|
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</nav>
|