mirror of
https://github.com/tiennm99/coolify.git
synced 2026-08-20 16:23:30 +00:00
Andras Bacsai
0a35909ddf
Add reusable pagination and page-size controls, improve mobile dropdown positioning, and migrate paginated views to consistent table components.
58 lines
2.8 KiB
PHP
58 lines
2.8 KiB
PHP
@props([
|
||
'from' => 0,
|
||
'to' => 0,
|
||
'total' => 0,
|
||
'currentPage' => 1,
|
||
'lastPage' => 1,
|
||
/** Comma-separated Livewire actions that should show the loading state */
|
||
'wireTarget' => null,
|
||
'firstAction' => null,
|
||
'previousAction' => null,
|
||
'nextAction' => null,
|
||
'lastAction' => null,
|
||
])
|
||
|
||
@php
|
||
$onFirstPage = (int) $currentPage <= 1;
|
||
$onLastPage = (int) $currentPage >= (int) $lastPage;
|
||
$buttonClass =
|
||
'flex size-7 items-center justify-center rounded-md border border-neutral-200 text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-black disabled:pointer-events-none disabled:opacity-35 dark:border-white/[0.08] dark:text-fg-dim dark:hover:bg-white/[0.06] dark:hover:text-fg';
|
||
$hasLoading = filled($wireTarget);
|
||
@endphp
|
||
|
||
<footer {{ $attributes->class('flex min-h-11 items-center justify-between border-t border-neutral-200 px-4 text-[11px] text-neutral-500 dark:border-white/[0.08] dark:text-fg-faint') }}>
|
||
<div class="flex items-center gap-3">
|
||
<span class="inline-flex h-7 items-center whitespace-nowrap tabular-nums">{{ $from }}–{{ $to }} of {{ $total }}</span>
|
||
@isset($pageSize)
|
||
{{ $pageSize }}
|
||
@endisset
|
||
@if ($hasLoading)
|
||
<span wire:loading.inline-flex wire:target="{{ $wireTarget }}" class="inline-flex items-center"
|
||
aria-live="polite">
|
||
<svg class="loading-indicator size-3.5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||
viewBox="0 0 24 24" aria-hidden="true">
|
||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||
<path class="opacity-75" fill="currentColor"
|
||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
|
||
</path>
|
||
</svg>
|
||
<span class="sr-only">Loading page…</span>
|
||
</span>
|
||
@endif
|
||
</div>
|
||
<div class="flex items-center gap-1">
|
||
<button type="button" class="{{ $buttonClass }}" aria-label="Previous page"
|
||
@if (filled($previousAction)) wire:click="{{ $previousAction }}" @endif
|
||
@if ($hasLoading) wire:loading.attr="disabled" wire:target="{{ $wireTarget }}" @endif
|
||
@disabled($onFirstPage)>
|
||
<x-reicon name="arrow-right" class="size-3.5 rotate-180" />
|
||
</button>
|
||
<button type="button" class="{{ $buttonClass }}" aria-label="Next page"
|
||
@if (filled($nextAction)) wire:click="{{ $nextAction }}" @endif
|
||
@if ($hasLoading) wire:loading.attr="disabled" wire:target="{{ $wireTarget }}" @endif
|
||
@disabled($onLastPage)>
|
||
<x-reicon name="arrow-right" class="size-3.5" />
|
||
</button>
|
||
</div>
|
||
</footer>
|