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 -->
<nav aria-label="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" aria-label={!text ? 'First page' : undefined}>
            {!text ? <Icon name="chevrons-left" /> : 'First'}
          </a>
        </li>
      )
    }
    <li class={`page-item${prevDescription ? ' page-prev' : ''} disabled`}>
      <a class={`page-link${text ? ' page-text' : ''}`} href="#" tabindex="-1" aria-disabled="true" aria-label={!prevDescription && !text ? 'Previous page' : undefined}>
        {
          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="#" aria-label={`Page ${i}`} aria-current={i === normalizedActiveItem ? 'page' : undefined}>
            {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="#" aria-label={`Page ${i}`} aria-current={i === normalizedActiveItem ? 'page' : undefined}>
                {i}
              </a>
            </li>
          ))}
        </>
      )
    }
    <li class={`page-item${nextDescription ? ' page-next' : ''}`}>
      <a class={`page-link${text ? ' page-text' : ''}`} href="#" aria-label={!nextDescription && !text ? 'Next page' : undefined}>
        {
          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="#" aria-label={!text ? 'Last page' : undefined}>
            {!text ? <Icon name="chevrons-right" /> : 'Last'}
          </a>
        </li>
      )
    }
  </ul>
</nav>
<!-- END PAGINATION -->