mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-nostr.git
synced 2026-01-28 07:43:18 +00:00
138 lines
9.1 KiB
PHP
138 lines
9.1 KiB
PHP
@props([
|
|
'paginator' => null,
|
|
])
|
|
|
|
@php
|
|
$simple = ! $paginator instanceof \Illuminate\Contracts\Pagination\LengthAwarePaginator;
|
|
@endphp
|
|
|
|
@if ($simple)
|
|
<div {{ $attributes->class('pt-3 border-t border-zinc-100 dark:border-zinc-700 flex justify-between items-center') }} data-flux-pagination>
|
|
<div></div>
|
|
|
|
@if ($paginator->hasPages())
|
|
<div class="flex items-center bg-white border border-zinc-200 rounded-[8px] p-[1px] dark:bg-white/10 dark:border-white/10">
|
|
@if ($paginator->onFirstPage())
|
|
<div class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-300 dark:text-zinc-500">
|
|
<flux:icon.chevron-left variant="micro" />
|
|
</div>
|
|
@else
|
|
@if(method_exists($paginator,'getCursorName'))
|
|
<button type="button" wire:key="cursor-{{ $paginator->getCursorName() }}-{{ $paginator->previousCursor()->encode() }}" wire:click="setPage('{{$paginator->previousCursor()->encode()}}','{{ $paginator->getCursorName() }}')" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-400 dark:text-white hover:bg-zinc-100 dark:hover:bg-white/20 hover:text-zinc-800 dark:hover:text-white">
|
|
<flux:icon.chevron-left variant="micro" />
|
|
</button>
|
|
@else
|
|
<button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-400 dark:text-white hover:bg-zinc-100 dark:hover:bg-white/20 hover:text-zinc-800 dark:hover:text-white">
|
|
<flux:icon.chevron-left variant="micro" />
|
|
</button>
|
|
@endif
|
|
@endif
|
|
|
|
@if ($paginator->hasMorePages())
|
|
@if(method_exists($paginator,'getCursorName'))
|
|
<button type="button" wire:key="cursor-{{ $paginator->getCursorName() }}-{{ $paginator->nextCursor()->encode() }}" wire:click="setPage('{{$paginator->nextCursor()->encode()}}','{{ $paginator->getCursorName() }}')" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-400 dark:text-white hover:bg-zinc-100 dark:hover:bg-white/20 hover:text-zinc-800 dark:hover:text-white">
|
|
<flux:icon.chevron-right variant="micro" />
|
|
</button>
|
|
@else
|
|
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-400 dark:text-white hover:bg-zinc-100 dark:hover:bg-white/20 hover:text-zinc-800 dark:hover:text-white">
|
|
<flux:icon.chevron-right variant="micro" />
|
|
</button>
|
|
@endif
|
|
@else
|
|
<div class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-300 dark:text-zinc-500">
|
|
<flux:icon.chevron-right variant="micro" />
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@else
|
|
<div {{ $attributes->class('@container pt-3 border-t border-zinc-100 dark:border-zinc-700 flex justify-between items-center gap-3') }} data-flux-pagination>
|
|
@if ($paginator->total() > 0)
|
|
<div class="text-zinc-500 dark:text-zinc-400 text-xs font-medium whitespace-nowrap">
|
|
{!! __('Showing') !!} {{ $paginator->firstItem() }} {!! __('to') !!} {{ $paginator->lastItem() }} {!! __('of') !!} {{ $paginator->total() }} {!! __('results') !!}
|
|
</div>
|
|
@else
|
|
<div></div>
|
|
@endif
|
|
|
|
@if ($paginator->hasPages())
|
|
{{-- Mobile pagination --}}
|
|
<div class="flex @[40rem]:hidden items-center bg-white border border-zinc-200 rounded-[8px] p-[1px] dark:bg-white/10 dark:border-white/10">
|
|
@if ($paginator->onFirstPage())
|
|
<div aria-disabled="true" aria-label="{{ __('pagination.previous') }}" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-300 dark:text-zinc-500">
|
|
<flux:icon.chevron-left variant="micro" />
|
|
</div>
|
|
@else
|
|
<button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" aria-label="{{ __('pagination.previous') }}" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-400 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/20 hover:text-zinc-800 dark:hover:text-white">
|
|
<flux:icon.chevron-left variant="micro" />
|
|
</button>
|
|
@endif
|
|
|
|
@if ($paginator->hasMorePages())
|
|
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" aria-label="{{ __('pagination.next') }}" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-400 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/20 hover:text-zinc-800 dark:hover:text-white">
|
|
<flux:icon.chevron-right variant="micro" />
|
|
</button>
|
|
@else
|
|
<div aria-label="{{ __('pagination.next') }}" class="flex justify-center items-center size-8 sm:size-6 rounded-[6px] text-zinc-300 dark:text-zinc-500">
|
|
<flux:icon.chevron-right variant="micro" />
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Desktop pagination --}}
|
|
<div class="hidden @[40rem]:flex items-center bg-white border border-zinc-200 rounded-[8px] p-[1px] dark:bg-white/10 dark:border-white/10">
|
|
@if ($paginator->onFirstPage())
|
|
<div aria-disabled="true" aria-label="{{ __('pagination.previous') }}" class="flex justify-center items-center size-6 rounded-[6px] text-zinc-300 dark:text-zinc-500">
|
|
<flux:icon.chevron-left variant="micro" />
|
|
</div>
|
|
@else
|
|
<button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" aria-label="{{ __('pagination.previous') }}" class="flex justify-center items-center size-6 rounded-[6px] text-zinc-400 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/20 hover:text-zinc-800 dark:hover:text-white">
|
|
<flux:icon.chevron-left variant="micro" />
|
|
</button>
|
|
@endif
|
|
|
|
@foreach (\Livewire\invade($paginator)->elements() as $element)
|
|
{{-- "Three Dots" Separator --}}
|
|
@if (is_string($element))
|
|
<div
|
|
aria-disabled="true"
|
|
class="cursor-default flex justify-center items-center text-xs size-6 rounded-[6px] font-medium dark:text-zinc-400 text-zinc-400"
|
|
>{{ $element }}</div>
|
|
@endif
|
|
|
|
{{-- Array Of Links --}}
|
|
@if (is_array($element))
|
|
@foreach ($element as $page => $url)
|
|
@if ($page == $paginator->currentPage())
|
|
<div
|
|
wire:key="paginator-{{ $paginator->getPageName() }}-page{{ $page }}"
|
|
aria-current="page"
|
|
class="cursor-default flex justify-center items-center text-xs h-6 px-2 rounded-[6px] font-medium dark:text-white text-zinc-800"
|
|
>{{ $page }}</div>
|
|
@else
|
|
<button
|
|
wire:key="paginator-{{ $paginator->getPageName() }}-page{{ $page }}"
|
|
wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')"
|
|
type="button"
|
|
class="text-xs h-6 px-2 rounded-[6px] text-zinc-400 font-medium dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/20 hover:text-zinc-800 dark:hover:text-white"
|
|
>{{ $page }}</button>
|
|
@endif
|
|
@endforeach
|
|
@endif
|
|
@endforeach
|
|
|
|
@if ($paginator->hasMorePages())
|
|
<button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" aria-label="{{ __('pagination.next') }}" class="flex justify-center items-center size-6 rounded-[6px] text-zinc-400 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/20 hover:text-zinc-800 dark:hover:text-white">
|
|
<flux:icon.chevron-right variant="micro" />
|
|
</button>
|
|
@else
|
|
<div aria-label="{{ __('pagination.next') }}" class="flex justify-center items-center size-6 rounded-[6px] text-zinc-300 dark:text-zinc-500">
|
|
<flux:icon.chevron-right variant="micro" />
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endif
|