Last active
April 7, 2021 21:38
-
-
Save juno-w/f11bd5291fbd27f5687f765b2568397c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@if ($paginator->hasPages()) | |
<nav role="navigation" aria-label="Pagination Navigation" class="flex justify-between"> | |
{{-- Previous Page Link --}} | |
@if ($paginator->onFirstPage()) | |
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md"> | |
{!! __('pagination.previous') !!} | |
</span> | |
@else | |
<button type="button" wire:click="previousPage" rel="prev" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"> | |
{!! __('pagination.previous') !!} | |
</button> | |
@endif | |
{{-- Next Page Link --}} | |
@if ($paginator->hasMorePages()) | |
<button type="button" wire:click="nextPage" rel="next" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"> | |
{!! __('pagination.next') !!} | |
</button> | |
@else | |
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md"> | |
{!! __('pagination.next') !!} | |
</span> | |
@endif | |
</nav> | |
@endif |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@if ($paginator->hasPages()) | |
<nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between"> | |
<div class="flex justify-between flex-1 sm:hidden"> | |
@if ($paginator->onFirstPage()) | |
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-500 bg-white border border-gray-300 rounded-md cursor-default"> | |
{!! __('pagination.previous') !!} | |
</span> | |
@else | |
<button type="button" wire:click="previousPage" class="relative inline-flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700"> | |
{!! __('pagination.previous') !!} | |
</button> | |
@endif | |
@if ($paginator->hasMorePages()) | |
<button type="button" wire:click="nextPage" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700"> | |
{!! __('pagination.next') !!} | |
</button> | |
@else | |
<span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium leading-5 text-gray-500 bg-white border border-gray-300 rounded-md cursor-default"> | |
{!! __('pagination.next') !!} | |
</span> | |
@endif | |
</div> | |
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> | |
<div> | |
<p class="text-sm leading-5 text-gray-700"> | |
{!! __('Showing') !!} | |
<span class="font-medium">{{ $paginator->firstItem() }}</span> | |
{!! __('to') !!} | |
<span class="font-medium">{{ $paginator->lastItem() }}</span> | |
{!! __('of') !!} | |
<span class="font-medium">{{ $paginator->total() }}</span> | |
{!! __('results') !!} | |
</p> | |
</div> | |
<div> | |
<span class="relative z-0 inline-flex shadow-sm"> | |
{{-- Previous Page Link --}} | |
@if ($paginator->onFirstPage()) | |
<span aria-disabled="true" aria-label="{{ __('pagination.previous') }}"> | |
<span class="relative inline-flex items-center px-2 py-2 text-sm font-medium leading-5 text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md" aria-hidden="true"> | |
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> | |
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
</svg> | |
</span> | |
</span> | |
@else | |
<button type="button" wire:click="previousPage" rel="prev" class="relative inline-flex items-center px-2 py-2 text-sm font-medium leading-5 text-gray-500 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-l-md hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500" aria-label="{{ __('pagination.previous') }}"> | |
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> | |
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" /> | |
</svg> | |
</button> | |
@endif | |
{{-- Pagination Elements --}} | |
@foreach ($elements as $element) | |
{{-- "Three Dots" Separator --}} | |
@if (is_string($element)) | |
<span aria-disabled="true"> | |
<span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-gray-700 bg-white border border-gray-300 cursor-default">{{ $element }}</span> | |
</span> | |
@endif | |
{{-- Array Of Links --}} | |
@if (is_array($element)) | |
@foreach ($element as $page => $url) | |
@if ($page == $paginator->currentPage()) | |
<span aria-current="page"> | |
<span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-gray-500 bg-white border border-gray-300 cursor-default">{{ $page }}</span> | |
</span> | |
@else | |
<button type="button" wire:click="gotoPage({{ $page }})" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700" aria-label="{{ __('Go to page :page', ['page' => $page]) }}"> | |
{{ $page }} | |
</button> | |
@endif | |
@endforeach | |
@endif | |
@endforeach | |
{{-- Next Page Link --}} | |
@if ($paginator->hasMorePages()) | |
<button type="button" wire:click="nextPage" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium leading-5 text-gray-500 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-r-md hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500" aria-label="{{ __('pagination.next') }}"> | |
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> | |
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /> | |
</svg> | |
</button> | |
@else | |
<span aria-disabled="true" aria-label="{{ __('pagination.next') }}"> | |
<span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium leading-5 text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md" aria-hidden="true"> | |
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> | |
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /> | |
</svg> | |
</span> | |
</span> | |
@endif | |
</span> | |
</div> | |
</div> | |
</nav> | |
@endif |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment