tabler/shared/ui/Pagination.astro

---
import Icon from './Icon.astro'

interface Props {
  count?: number
  offset?: number
  activeItem?: number | string
  class?: string
  firstLast?: boolean
  text?: boolean
  prevDescription?: string
  nextDescription?: string
}

const { count = 5, offset = count, activeItem: activeItemProp = 3, class: className, firstLast, text, prevDescription, nextDescription } = Astro.props

const activeItem = Number(activeItemProp)
const normalizedActiveItem = Number.isFinite(activeItem) ? activeItem : 3

// equivalent of the (1..offset) loop
const firstPages: number[] = []
for (let i = 1; i <= offset; i++) firstPages.push(i)

// equivalent of (count-offset..count), where count-offset = count - offset + 1
const countOffset = count - offset + 1
const lastPages: number[] = []
if (offset < count) {
  for (let i = countOffset; i <= count; i++) lastPages.push(i)
}
---

<!-- BEGIN PAGINATION -->
<ul class={`pagination${className ? ` ${className}` : ''}`}>
  {
    firstLast && (
      <li class="page-item disabled">
        <a class={`page-link${text ? ' page-text' : ''}`} href="#" tabindex="-1" aria-disabled="true">
          {!text ? <Icon name="chevrons-left" /> : 'Previous'}
        </a>
      </li>
    )
  }
  <li class={`page-item${prevDescription ? ' page-prev' : ''} disabled`}>
    <a class={`page-link${text ? ' page-text' : ''}`} href="#" tabindex="-1" aria-disabled="true">
      {
        prevDescription ? (
          <>
            <div class="page-item-subtitle">previous</div>
            <div class="page-item-title">{prevDescription}</div>
          </>
        ) : !text ? (
          <Icon name="chevron-left" />
        ) : (
          'Previous'
        )
      }
    </a>
  </li>
  {
    firstPages.map((i) => (
      <li class={`page-item${i === normalizedActiveItem ? ' active' : ''}`}>
        <a class="page-link" href="#">
          {i}
        </a>
      </li>
    ))
  }
  {
    offset < count && (
      <>
        <li class="page-item">
          <span class="page-link disabled">&hellip;</span>
        </li>
        {lastPages.map((i) => (
          <li class={`page-item${i === normalizedActiveItem ? ' active' : ''}`}>
            <a class="page-link" href="#">
              {i}
            </a>
          </li>
        ))}
      </>
    )
  }
  <li class={`page-item${prevDescription ? ' page-next' : ''}`}>
    <a class={`page-link${text ? ' page-text' : ''}`} href="#">
      {
        nextDescription ? (
          <>
            <div class="page-item-subtitle">next</div>
            <div class="page-item-title">{nextDescription}</div>
          </>
        ) : !text ? (
          <Icon name="chevron-right" />
        ) : (
          'Next'
        )
      }
    </a>
  </li>
  {
    firstLast && (
      <li class="page-item">
        <a class={`page-link${text ? ' page-text' : ''}`} href="#">
          {!text ? <Icon name="chevrons-right" /> : 'Next'}
        </a>
      </li>
    )
  }
</ul>
<!-- END PAGINATION -->