<div class="flex flex-col gap-6">
  <div x-data="pagination" class="flex flex-wrap items-center gap-3">
    <button x-bind:disabled="currentPage === 1" @click="changePage(currentPage - 1)" class="btn-default-icon-outlined dark:border-neutral-100 text-sm lg:text-base size-10 select-none hover:bg-neutral-900 hover:text-neutral-0 disabled:cursor-not-allowed disabled:opacity-30">
      <i class="las la-angle-left text-xl"></i>
    </button>

    <template x-for="page in pageNumbers">
      <button
        x-text="page"
        :class="{ 'border-neutral-900 dark:border-neutral-100 bg-neutral-900 text-neutral-0':page==currentPage, 'flex text-sm lg:text-base size-10 select-none items-center justify-center hover:bg-neutral-900 hover:text-neutral-0 rounded-full border border-neutral-900 dark:border-neutral-100 font-semibold duration-300':page != '...', 'cursor-default':page=='...'}"
        @click="changePage(page)"
      ></button>
    </template>

    <button x-bind:disabled="currentPage === totalPages" @click="changePage(currentPage + 1)" class="btn-default-icon-outlined dark:border-neutral-100 text-sm lg:text-base size-10 select-none hover:bg-neutral-900 hover:text-neutral-0 disabled:cursor-not-allowed disabled:opacity-30">
      <i class="las la-angle-right text-xl"></i>
    </button>
  </div>

  <!-- circular four -->
  <div x-data="pagination" class="flex flex-wrap items-center gap-3">
    <button
      x-bind:disabled="currentPage === 1"
      @click="changePage(currentPage - 1)"
      class="flex text-sm lg:text-base size-10 select-none items-center justify-center rounded-full border border-neutral-40 duration-300 hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-30 dark:border-neutral-100 dark:hover:bg-neutral-500"
    >
      <i class="las la-angle-left text-xl"></i>
    </button>

    <template x-for="page in pageNumbers">
      <button
        x-text="page"
        :class=" {'bg-neutral-50 dark:bg-neutral-100  border-neutral-40 dark:border-neutral-100':page==currentPage, 'flex text-sm lg:text-base size-10 select-none items-center justify-center dark:border-neutral-100 rounded-full border font-semibold':page!='...', 'cursor-default':page=='...'}"
        @click="changePage(page)"
      ></button>
    </template>
    <button
      x-bind:disabled="currentPage === totalPages"
      @click="changePage(currentPage + 1)"
      class="flex text-sm lg:text-base size-10 select-none items-center justify-center rounded-full border border-neutral-40 duration-300 hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-30 dark:border-neutral-100 dark:hover:bg-neutral-500"
    >
      <i class="las la-angle-right text-xl"></i>
    </button>
  </div>

  <!-- circular five -->
  <div x-data="pagination" class="flex flex-wrap items-center gap-3">
    <button
      x-bind:disabled="currentPage === 1"
      @click="changePage(currentPage - 1)"
      class="flex text-sm lg:text-base size-10 select-none items-center justify-center rounded-full border border-transparent duration-300 hover:border-neutral-40 hover:bg-neutral-40 disabled:cursor-not-allowed disabled:opacity-30 dark:border-transparent dark:hover:bg-neutral-600"
    >
      <i class="las la-angle-left text-xl"></i>
    </button>

    <template x-for="page in pageNumbers">
      <button
        x-text="page"
        :class=" {'bg-neutral-40  dark:bg-neutral-500 border-neutral-40 dark:border-neutral-500':page==currentPage, 'flex text-sm lg:text-base size-10 select-none items-center justify-center rounded-full border-neutral-50 border-transparent border font-semibold duration-300 hover:bg-neutral-40 dark:hover:bg-neutral-500':page!='...', 'cursor-default':page=='...'}"
        @click="changePage(page)"
      ></button>
    </template>
    <button
      x-bind:disabled="currentPage === totalPages"
      @click="changePage(currentPage + 1)"
      class="flex text-sm lg:text-base size-10 select-none items-center justify-center rounded-full border border-transparent duration-300 hover:border-neutral-40 hover:bg-neutral-40 disabled:cursor-not-allowed disabled:opacity-30 dark:border-transparent dark:hover:bg-neutral-600"
    >
      <i class="las la-angle-right text-xl"></i>
    </button>
  </div>
</div>
                  

<div class="flex gap-3 mb-6">
<div class="flex flex-col gap-6">
  <!-- primary -->
  <div x-data="pagination" class="flex flex-wrap items-center gap-3">
    <button
      x-bind:disabled="currentPage === 1"
      @click="changePage(currentPage - 1)"
      class="btn-primary-icon-outlined text-sm lg:text-base size-10 select-none hover:bg-primary-300 hover:text-neutral-0 disabled:cursor-not-allowed disabled:opacity-70 disabled:hover:bg-transparent disabled:hover:text-primary-200"
    >
      <i class="las la-angle-left text-xl"></i>
    </button>

    <template x-for="page in pageNumbers">
      <button
        x-text="page"
        :class=" {'btn-primary-icon !text-neutral-0':page==currentPage, 'flex text-sm lg:text-base size-10 select-none border-primary-300 hover:bg-primary-300 items-center hover:text-neutral-0 justify-center text-primary-300 rounded-full border duration-300 font-semibold':page!='...', 'cursor-default':page=='...'}"
        @click="changePage(page)"
      ></button>
    </template>
    <button
      x-bind:disabled="currentPage === totalPages"
      @click="changePage(currentPage + 1)"
      class="btn-primary-icon-outlined text-sm lg:text-base size-10 select-none hover:bg-primary-300 hover:text-neutral-0 disabled:cursor-not-allowed disabled:opacity-70 disabled:hover:bg-transparent disabled:hover:text-primary-200"
    >
      <i class="las la-angle-right text-xl"></i>
    </button>
  </div>

  <!-- secondary -->
  <div x-data="pagination" class="flex flex-wrap items-center gap-3">
    <button
      x-bind:disabled="currentPage === 1"
      @click="changePage(currentPage - 1)"
      class="btn-secondary-icon-outlined text-sm lg:text-base size-10 select-none hover:bg-secondary-300 hover:text-neutral-0 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-secondary-200"
    >
      <i class="las la-angle-left text-xl"></i>
    </button>

    <template x-for="page in pageNumbers">
      <button
        x-text="page"
        :class=" {'btn-secondary-icon !text-neutral-0':page==currentPage, 'flex text-sm lg:text-base size-10 select-none border-secondary-300 hover:bg-secondary-300 items-center hover:text-neutral-0 text-secondary-300 justify-center rounded-full border duration-300 font-semibold':page!='...', 'cursor-default':page=='...'}"
        @click="changePage(page)"
      ></button>
    </template>

    <button
      x-bind:disabled="currentPage === totalPages"
      @click="changePage(currentPage + 1)"
      class="btn-secondary-icon-outlined text-sm lg:text-base size-10 select-none hover:bg-secondary-300 hover:text-neutral-0 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-secondary-200"
    >
      <i class="las la-angle-right text-xl"></i>
    </button>
  </div>

  <!-- primary outline -->
  <div x-data="pagination" class="flex flex-wrap items-center gap-3">
    <button x-bind:disabled="currentPage === 1" @click="changePage(currentPage - 1)" class="btn-primary-icon-outlined text-sm lg:text-base size-10 select-none hover:bg-primary-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent">
      <i class="las la-angle-left text-xl"></i>
    </button>

    <template x-for="page in pageNumbers">
      <button
        x-text="page"
        :class="{
                'bg-primary-50 text-primary-300 hover:bg-primary-75': page==currentPage, 'btn-primary-icon-outlined text-sm lg:text-base size-10 select-none hover:bg-primary-50':page != '...', 'cursor-default': page =='...'
              }"
        @click="changePage(page)"
      ></button>
    </template>
    <button x-bind:disabled="currentPage === totalPages" @click="changePage(currentPage + 1)" class="btn-primary-icon-outlined text-sm lg:text-base size-10 select-none hover:bg-primary-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent">
      <i class="las la-angle-right text-xl"></i>
    </button>
  </div>

  <!-- secondary outline -->
  <div x-data="pagination" class="flex flex-wrap items-center gap-3">
    <button x-bind:disabled="currentPage === 1" @click="changePage(currentPage - 1)" class="btn-secondary-icon-outlined text-sm lg:text-base size-10 select-none hover:bg-secondary-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent">
      <i class="las la-angle-left text-xl"></i>
    </button>

    <template x-for="page in pageNumbers">
      <button
        x-text="page"
        :class="{
                'bg-secondary-300/10 text-secondary-300 hover:bg-secondary-75': page==currentPage, 'btn-secondary-icon-outlined text-sm lg:text-base size-10 select-none hover:bg-secondary-300/10': page!= '...', 'cursor-default': page== '...'
              }"
        @click="changePage(page)"
      ></button>
    </template>
    <button x-bind:disabled="currentPage === totalPages" @click="changePage(currentPage + 1)" class="btn-secondary-icon-outlined text-sm lg:text-base size-10 select-none hover:bg-secondary-300/10 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent">
      <i class="las la-angle-right text-xl"></i>
    </button>
  </div>

  <!-- primary soft -->
  <div x-data="pagination" class="flex flex-wrap items-center gap-3">
    <button
      x-bind:disabled="currentPage === 1"
      @click="changePage(currentPage - 1)"
      class="flex text-sm lg:text-base size-10 select-none items-center justify-center rounded-full border border-transparent text-primary-300 duration-300 hover:border-primary-50 hover:bg-primary-50 disabled:cursor-not-allowed disabled:opacity-30 dark:border-transparent dark:hover:bg-neutral-600"
    >
      <i class="las la-angle-left text-xl"></i>
    </button>

    <template x-for="page in pageNumbers">
      <button
        x-text="page"
        :class=" {'bg-primary-50  border-primary-50 dark:border-neutral-500':page==currentPage, 'flex text-sm lg:text-base size-10 select-none items-center justify-center rounded-full border-neutral-50 border-transparent border font-semibold duration-300 hover:bg-primary-50 dark:hover:bg-neutral-500 text-primary-300':page!='...', 'cursor-default':page=='...'}"
        @click="changePage(page)"
      ></button>
    </template>
    <button
      x-bind:disabled="currentPage === totalPages"
      @click="changePage(currentPage + 1)"
      class="flex text-sm lg:text-base size-10 select-none items-center justify-center rounded-full border border-transparent text-primary-300 duration-300 hover:border-primary-50 hover:bg-primary-50 disabled:cursor-not-allowed disabled:opacity-30 dark:border-transparent dark:hover:bg-neutral-600"
    >
      <i class="las la-angle-right text-xl"></i>
    </button>
  </div>

  <!-- secondary soft -->
  <div x-data="pagination" class="flex flex-wrap items-center gap-3">
    <button
      x-bind:disabled="currentPage === 1"
      @click="changePage(currentPage - 1)"
      class="flex text-sm lg:text-base size-10 select-none items-center justify-center rounded-full border border-transparent text-secondary-300 duration-300 hover:border-secondary-50 hover:bg-secondary-300/10 disabled:cursor-not-allowed disabled:opacity-30 dark:border-transparent dark:hover:bg-neutral-600"
    >
      <i class="las la-angle-left text-xl"></i>
    </button>

    <template x-for="page in pageNumbers">
      <button
        x-text="page"
        :class=" {'bg-secondary-300/10  border-secondary-300/10 dark:border-neutral-500':page==currentPage, 'flex text-sm lg:text-base size-10 select-none items-center justify-center rounded-full border-neutral-50 border-transparent border font-semibold duration-300 hover:bg-secondary-300/10 dark:hover:bg-neutral-500 text-secondary-300':page!='...', 'cursor-default':page=='...'}"
        @click="changePage(page)"
      ></button>
    </template>
    <button
      x-bind:disabled="currentPage === totalPages"
      @click="changePage(currentPage + 1)"
      class="flex text-sm lg:text-base size-10 select-none items-center justify-center rounded-full border border-transparent text-secondary-300 duration-300 hover:border-secondary-300/10 hover:bg-secondary-300/10 disabled:cursor-not-allowed disabled:opacity-30 dark:border-transparent dark:hover:bg-neutral-600"
    >
      <i class="las la-angle-right text-xl"></i>
    </button>
  </div>
</div>
</div>
                  

<div class="flex flex-col gap-6">
  <div x-data="pagination" class="flex flex-wrap items-center gap-3">
    <button x-bind:disabled="currentPage === 1" @click="changePage(currentPage - 1)" class="btn-default-icon-outlined text-sm lg:text-base size-10 select-none rounded-lg hover:bg-neutral-900 hover:text-neutral-0 disabled:cursor-not-allowed disabled:opacity-30">
      <i class="las la-angle-left text-xl"></i>
    </button>

    <template x-for="page in pageNumbers">
      <button
        x-text="page"
        :class="{ 'border-neutral-900 dark:border-neutral-0 bg-neutral-900 text-neutral-0':page==currentPage, 'flex text-sm lg:text-base size-10 select-none items-center justify-center hover:bg-neutral-900 border-neutral-100 hover:text-neutral-0 rounded-lg border font-semibold duration-300':page != '...', 'cursor-default':page=='...'}"
        @click="changePage(page)"
      ></button>
    </template>

    <button x-bind:disabled="currentPage === totalPages" @click="changePage(currentPage + 1)" class="btn-default-icon-outlined text-sm lg:text-base size-10 select-none rounded-lg hover:bg-neutral-900 hover:text-neutral-0 disabled:cursor-not-allowed disabled:opacity-30">
      <i class="las la-angle-right text-xl"></i>
    </button>
  </div>

  <!-- circular four -->
  <div x-data="pagination" class="flex flex-wrap items-center gap-3">
    <button
      x-bind:disabled="currentPage === 1"
      @click="changePage(currentPage - 1)"
      class="flex text-sm lg:text-base size-10 select-none items-center justify-center rounded-lg border border-neutral-40 duration-300 hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-30 dark:hover:bg-neutral-500"
    >
      <i class="las la-angle-left text-xl"></i>
    </button>

    <template x-for="page in pageNumbers">
      <button
        x-text="page"
        :class=" {'bg-neutral-50 dark:bg-neutral-100  border-neutral-40 dark:border-neutral-100':page==currentPage, 'flex text-sm lg:text-base size-10 select-none items-center justify-center rounded-lg border font-semibold':page!='...', 'cursor-default':page=='...'}"
        @click="changePage(page)"
      ></button>
    </template>
    <button
      x-bind:disabled="currentPage === totalPages"
      @click="changePage(currentPage + 1)"
      class="flex text-sm lg:text-base size-10 select-none items-center justify-center rounded-lg border border-neutral-40 duration-300 hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-30 dark:hover:bg-neutral-500"
    >
      <i class="las la-angle-right text-xl"></i>
    </button>
  </div>

  <!-- circular five -->
  <div x-data="pagination" class="flex flex-wrap items-center gap-3">
    <button
      x-bind:disabled="currentPage === 1"
      @click="changePage(currentPage - 1)"
      class="flex text-sm lg:text-base size-10 select-none items-center justify-center rounded-lg border border-transparent duration-300 hover:border-neutral-40 hover:bg-neutral-40 disabled:cursor-not-allowed disabled:opacity-30 dark:border-transparent dark:hover:bg-neutral-600"
    >
      <i class="las la-angle-left text-xl"></i>
    </button>

    <template x-for="page in pageNumbers">
      <button
        x-text="page"
        :class=" {'bg-neutral-40  dark:bg-neutral-500 border-neutral-40 dark:border-neutral-500':page==currentPage, 'flex text-sm lg:text-base size-10 select-none items-center justify-center rounded-lg border-neutral-50 border-transparent border font-semibold duration-300 hover:bg-neutral-40 dark:hover:bg-neutral-500':page!='...', 'cursor-default':page=='...'}"
        @click="changePage(page)"
      ></button>
    </template>
    <button
      x-bind:disabled="currentPage === totalPages"
      @click="changePage(currentPage + 1)"
      class="flex text-sm lg:text-base size-10 select-none items-center justify-center rounded-lg border border-transparent duration-300 hover:border-neutral-40 hover:bg-neutral-40 disabled:cursor-not-allowed disabled:opacity-30 dark:border-transparent dark:hover:bg-neutral-600"
    >
      <i class="las la-angle-right text-xl"></i>
    </button>
  </div>
</div>
                  

<div class="flex flex-col gap-6">
  <!-- small -->
  <div x-data="pagination" class="flex flex-wrap items-center gap-3">
    <button x-bind:disabled="currentPage === 1" @click="changePage(currentPage - 1)" class="btn-default-icon-outlined size-7 select-none hover:bg-neutral-900 hover:text-neutral-0 disabled:cursor-not-allowed disabled:opacity-30">
      <i class="las la-angle-left text-base"></i>
    </button>

    <template x-for="page in pageNumbers">
      <button
        x-text="page"
        :class="{ 'border-neutral-900 dark:border-neutral-0 bg-neutral-900 text-neutral-0':page==currentPage, 'flex size-7 select-none items-center justify-center hover:bg-neutral-900 hover:text-neutral-0 rounded-full border s-text font-semibold duration-300':page != '...', 'cursor-default':page=='...'}"
        @click="changePage(page)"
      ></button>
    </template>

    <button x-bind:disabled="currentPage === totalPages" @click="changePage(currentPage + 1)" class="btn-default-icon-outlined s-text size-7 select-none hover:bg-neutral-900 hover:text-neutral-0 disabled:cursor-not-allowed disabled:opacity-30">
      <i class="las la-angle-right text-base"></i>
    </button>
  </div>

  <!-- Regular -->
  <div x-data="pagination" class="flex flex-wrap items-center gap-3">
    <button x-bind:disabled="currentPage === 1" @click="changePage(currentPage - 1)" class="btn-default-icon-outlined text-sm lg:text-base size-10 select-none hover:bg-neutral-900 hover:text-neutral-0 disabled:cursor-not-allowed disabled:opacity-30">
      <i class="las la-angle-left text-xl"></i>
    </button>

    <template x-for="page in pageNumbers">
      <button
        x-text="page"
        :class="{ 'border-neutral-900 dark:border-neutral-0 bg-neutral-900 text-neutral-0':page==currentPage, 'flex text-sm lg:text-base size-10 select-none items-center justify-center hover:bg-neutral-900 hover:text-neutral-0 rounded-full border font-semibold duration-300':page != '...', 'cursor-default':page=='...'}"
        @click="changePage(page)"
      ></button>
    </template>

    <button x-bind:disabled="currentPage === totalPages" @click="changePage(currentPage + 1)" class="btn-default-icon-outlined text-sm lg:text-base size-10 select-none hover:bg-neutral-900 hover:text-neutral-0 disabled:cursor-not-allowed disabled:opacity-30">
      <i class="las la-angle-right text-xl"></i>
    </button>
  </div>

  <!-- Large -->
  <div x-data="pagination" class="flex flex-wrap items-center gap-3">
    <button x-bind:disabled="currentPage === 1" @click="changePage(currentPage - 1)" class="btn-default-icon-outlined size-12 select-none hover:bg-neutral-900 hover:text-neutral-0 disabled:cursor-not-allowed disabled:opacity-30">
      <i class="las la-angle-left text-2xl"></i>
    </button>

    <template x-for="page in pageNumbers">
      <button
        x-text="page"
        :class="{ 'border-neutral-900 dark:border-neutral-0 bg-neutral-900 text-neutral-0':page==currentPage, 'flex size-12 select-none items-center justify-center hover:bg-neutral-900 l-text hover:text-neutral-0 rounded-full border font-semibold duration-300':page != '...', 'cursor-default':page=='...'}"
        @click="changePage(page)"
      ></button>
    </template>

    <button x-bind:disabled="currentPage === totalPages" @click="changePage(currentPage + 1)" class="btn-default-icon-outlined size-12 select-none hover:bg-neutral-900 hover:text-neutral-0 disabled:cursor-not-allowed disabled:opacity-30">
      <i class="las la-angle-right text-2xl"></i>
    </button>
  </div>
</div>
                  

<div class="flex flex-col gap-6">
  <!-- Regular -->
  <div class="flex items-center gap-3">
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">
      <i class="las la-angle-left text-xl"></i>
    </button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">1</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">...</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">6</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">...</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">8</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">
      <i class="las la-angle-right text-xl"></i>
    </button>
  </div>

  <div class="flex items-center gap-3">
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">
      <i class="las la-angle-left text-xl"></i>
    </button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">1</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">...</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">5</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">6</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">7</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">...</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">8</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">
      <i class="las la-angle-right text-xl"></i>
    </button>
  </div>

  <div class="flex items-center gap-3">
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">
      <i class="las la-angle-left text-xl"></i>
    </button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">1</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">...</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">4</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">...</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">6</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">7</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">...</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">16</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">...</button>
    <button class="btn-default-icon-outlined size-10 hover:bg-neutral-900 hover:text-neutral-0">
      <i class="las la-angle-right text-xl"></i>
    </button>
  </div>
</div>