First page

{#if totalPage > 1}

gotoPage(1)} aria-label="Goto Page 1" class="inline-flex gap-4 justify-center items-center px-4 h-10 text-sm font-medium text-gray-300 transition duration-300 hover:text-pink-500 focus:text-pink-600 focus:bg-pink-50 focus-visible:outline-none hover:bg-dark-300 hover:stroke-pink-500 focus:stroke-pink-600" >First
gotoPage(currentPage - 1)} aria-label="Goto Page 1" class="inline-flex gap-4 justify-center items-center px-4 h-10 text-sm font-medium text-gray-300 transition duration-300 hover:text-pink-500 focus:text-pink-600 focus:bg-pink-50 focus-visible:outline-none stroke-black hover:bg-dark-300 hover:stroke-pink-500 focus:stroke-pink-600" >Prev
{#each allPage as page} {#if page == currentPage} gotoPage(page)} class="items-center justify-center hidden h-10 px-4 text-sm font-medium transition duration-300 border-b focus-visible:outline-none whitespace-nowrap hover:border-b-pink-600 hover:bg-dark-300 hover:text-pink-600 focus:border-b-pink-700 focus:bg-pink-50 focus:text-pink-700 md:inline-flex {currentClass}" aria-label="Current Page, Page {currentPage}" aria-current="true">{currentPage} {:else} gotoPage(page)} aria-label="Goto Page" class="hidden gap-4 justify-center items-center px-4 h-10 text-sm font-medium text-gray-300 transition duration-300 md:inline-flex hover:text-pink-500 focus:text-pink-600 focus:bg-pink-50 focus-visible:outline-none stroke-black hover:bg-dark-300 hover:stroke-pink-500 focus:stroke-pink-600" >{page} {/if} {/each}
gotoPage(currentPage + 1)} aria-label="Got to Last" class="inline-flex gap-4 justify-center items-center px-4 h-10 text-sm font-medium text-gray-300 transition duration-300 hover:text-pink-500 focus:text-pink-600 focus:bg-pink-50 focus-visible:outline-none stroke-black hover:bg-dark-300 hover:stroke-pink-500 focus:stroke-pink-600" >Next
gotoPage(totalPage)} aria-label="Goto Page {totalPage}" class="inline-flex gap-4 justify-center items-center px-4 h-10 text-sm font-medium text-gray-300 transition duration-300 hover:text-pink-500 focus:text-pink-600 focus:bg-pink-50 focus-visible:outline-none hover:bg-dark-300 hover:stroke-pink-500 focus:stroke-pink-600" >Last

{/if}