tailwind.blade.php (9951B)
1 @php 2 if (! isset($scrollTo)) { 3 $scrollTo = 'body'; 4 } 5 6 $scrollIntoViewJsSnippet = ($scrollTo !== false) 7 ? <<<JS 8 (\$el.closest('{$scrollTo}') || document.querySelector('{$scrollTo}')).scrollIntoView() 9 JS 10 : ''; 11 @endphp 12 13 <div> 14 @if ($paginator->hasPages()) 15 <nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between"> 16 <div class="flex justify-between flex-1 sm:hidden"> 17 <span> 18 @if ($paginator->onFirstPage()) 19 <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 select-none"> 20 {!! __('pagination.previous') !!} 21 </span> 22 @else 23 <button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" 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"> 24 {!! __('pagination.previous') !!} 25 </button> 26 @endif 27 </span> 28 29 <span> 30 @if ($paginator->hasMorePages()) 31 <button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" wire:loading.attr="disabled" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.before" class="relative inline-flex items-center px-4 py-2 ml-3 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"> 32 {!! __('pagination.next') !!} 33 </button> 34 @else 35 <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md select-none"> 36 {!! __('pagination.next') !!} 37 </span> 38 @endif 39 </span> 40 </div> 41 42 <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> 43 <div> 44 <p class="text-sm text-gray-700 leading-5"> 45 <span>{!! __('Showing') !!}</span> 46 <span class="font-medium">{{ $paginator->firstItem() }}</span> 47 <span>{!! __('to') !!}</span> 48 <span class="font-medium">{{ $paginator->lastItem() }}</span> 49 <span>{!! __('of') !!}</span> 50 <span class="font-medium">{{ $paginator->total() }}</span> 51 <span>{!! __('results') !!}</span> 52 </p> 53 </div> 54 55 <div> 56 <span class="relative z-0 inline-flex rounded-md shadow-sm"> 57 <span> 58 {{-- Previous Page Link --}} 59 @if ($paginator->onFirstPage()) 60 <span aria-disabled="true" aria-label="{{ __('pagination.previous') }}"> 61 <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5" aria-hidden="true"> 62 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> 63 <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" /> 64 </svg> 65 </span> 66 </span> 67 @else 68 <button type="button" wire:click="previousPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="previousPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" rel="prev" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 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 transition ease-in-out duration-150" aria-label="{{ __('pagination.previous') }}"> 69 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> 70 <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" /> 71 </svg> 72 </button> 73 @endif 74 </span> 75 76 {{-- Pagination Elements --}} 77 @foreach ($elements as $element) 78 {{-- "Three Dots" Separator --}} 79 @if (is_string($element)) 80 <span aria-disabled="true"> 81 <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5 select-none">{{ $element }}</span> 82 </span> 83 @endif 84 85 {{-- Array Of Links --}} 86 @if (is_array($element)) 87 @foreach ($element as $page => $url) 88 <span wire:key="paginator-{{ $paginator->getPageName() }}-page{{ $page }}"> 89 @if ($page == $paginator->currentPage()) 90 <span aria-current="page"> 91 <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 select-none">{{ $page }}</span> 92 </span> 93 @else 94 <button type="button" wire:click="gotoPage({{ $page }}, '{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 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 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => $page]) }}"> 95 {{ $page }} 96 </button> 97 @endif 98 </span> 99 @endforeach 100 @endif 101 @endforeach 102 103 <span> 104 {{-- Next Page Link --}} 105 @if ($paginator->hasMorePages()) 106 <button type="button" wire:click="nextPage('{{ $paginator->getPageName() }}')" x-on:click="{{ $scrollIntoViewJsSnippet }}" dusk="nextPage{{ $paginator->getPageName() == 'page' ? '' : '.' . $paginator->getPageName() }}.after" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 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 transition ease-in-out duration-150" aria-label="{{ __('pagination.next') }}"> 107 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> 108 <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" /> 109 </svg> 110 </button> 111 @else 112 <span aria-disabled="true" aria-label="{{ __('pagination.next') }}"> 113 <span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5" aria-hidden="true"> 114 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"> 115 <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" /> 116 </svg> 117 </span> 118 </span> 119 @endif 120 </span> 121 </span> 122 </div> 123 </div> 124 </nav> 125 @endif 126 </div>