<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>