Hide previous / next buttons in the Pagination component

[Destaq]

Summary

Currently, in the flowbite-svelte pagination component, a user will always see previous / next buttons regardless of what the active page is. This may not be desired if the user is on the first or last page.

Basic example

<nav aria-label="Page navigation">
  <ul class={twMerge(ulClass, table && 'divide-x divide-gray-700', $$props.class)}>
    <li>
      <PaginationItem on:click={previous} class={twJoin(normalCls, table ? 'rounded-l' : 'rounded-l-lg')}>
        <slot name="prev">Previous</slot>
      </PaginationItem>
    </li>
    {#each pages as { name, href, active }}
      <li>
        <PaginationItem
          {active}
          on:blur
          on:change
          on:click
          on:focus
          on:keydown
          on:keypress
          on:keyup
          on:mouseenter
          on:mouseleave
          on:mouseover
          {activeCls}
          {normalCls}
          {href}>{name}</PaginationItem>
      </li>
    {/each}
    <li>
      <PaginationItem on:click={next} class={twJoin(normalCls, table ? 'rounded-r' : 'rounded-r-lg')}>
        <slot name="next">Next</slot>
      </PaginationItem>
    </li>
  </ul>
</nav>

This is how things look right now. I would put the entire <li> into the slot, so that a user can optionally define empty slots to represent no back or forward buttons.

Motivation

This is the way that many pagination components work on the web. And if they do not work this way, they at least have a disabled mouse icon on the previous button (which currently does not happen).

So, moving around the PaginationItem is probably a good idea anyway, because it allows for greater customization than of just the text / icon; this way you'd be able to e.g. change the entire background of the item by using a custom PaginationItem.