Skip to content

Instantly share code, notes, and snippets.

@benjamincrozat
Last active August 3, 2023 19:55
Show Gist options
  • Save benjamincrozat/8e52607e45e8364d81b6c3dbcc9a2987 to your computer and use it in GitHub Desktop.
Save benjamincrozat/8e52607e45e8364d81b6c3dbcc9a2987 to your computer and use it in GitHub Desktop.
A nice Tailwind CSS-based design for LengthAwarePaginator.
@if ($paginator->hasPages())
<nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" class="flex items-center justify-between mt-16">
<div class="text-gray-400 dark:text-gray-800">
{{ $paginator->count() }}
{!! __('of') !!}
<span>{{ $paginator->total() }}</span>
{!! __('results') !!}
</div>
<div class="flex gap-1">
@if ($paginator->onFirstPage())
<span aria-disabled="true" aria-label="{{ __('pagination.previous') }}" class="flex items-center justify-center w-8 h-8 text-gray-200 cursor-default dark:text-gray-800">
</span>
@else
<a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="flex items-center justify-center w-8 h-8 text-blue-400 transition-colors bg-gray-100 rounded-sm dark:bg-gray-800/50 hover:bg-gray-200/50 hover:bg-gray-800 hover:text-blue-500">
</a>
@endif
@foreach ($elements as $element)
@if (is_string($element))
<span aria-disabled="true" class="flex items-center justify-center w-8 h-8 text-gray-200 cursor-default dark:text-gray-800">
<span>{{ $element }}</span>
</span>
@endif
@if (is_array($element))
@foreach ($element as $page => $url)
@if ($page == $paginator->currentPage())
<span aria-current="page" class="flex items-center justify-center w-8 h-8 bg-gray-200 rounded-sm cursor-default dark:bg-gray-800">
<span>{{ $page }}</span>
</span>
@else
<a href="{{ $url }}" class="flex items-center justify-center w-8 h-8 text-blue-400 transition-colors bg-gray-100 rounded-sm dark:bg-gray-800/50 hover:bg-gray-200/50 hover:bg-gray-800 hover:text-blue-500">
{{ $page }}
</a>
@endif
@endforeach
@endif
@endforeach
@if ($paginator->hasMorePages())
<a href="{{ $paginator->nextPageUrl() }}" rel="next" class="flex items-center justify-center w-8 h-8 text-blue-400 transition-colors bg-gray-100 rounded-sm dark:bg-gray-800/50 hover:bg-gray-200/50 hover:bg-gray-800 hover:text-blue-500">
</a>
@else
<span aria-disabled="true" aria-label="{{ __('pagination.next') }}" class="flex items-center justify-center w-8 h-8 text-gray-200 rounded-sm cursor-default dark:text-gray-800">
</span>
@endif
</div>
</nav>
@endif
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment