Paginator.astro

---
import type { Page } from "astro";
import MaskIcon from "./icons/MaskIcon.astro";
import { icons } from "@/utils/icons";

interface Props {
  page: Page<unknown>;
}

const { page } = Astro.props;
const { t, dir, localizeNumber } = Astro.locals;

const current = page.currentPage;
const last = page.lastPage;

const firstUrl = current === 1 ? page.url.current : page.url.first!;
const base = firstUrl.replace(/\/$/, "");

const getHrefForPage = (n: number) => (n === 1 ? firstUrl : `${base}/${n}/`);

type Item = { type: "page"; number: number } | { type: "ellipsis" };
const items: Item[] = [];

if (last <= 5) {
  // Show all pages if 5 or fewer
  for (let n = 1; n <= last; n++) {
    items.push({ type: "page", number: n });
  }
} else {
  const visible = new Set(
    [1, last, current, current - 1, current + 1].filter(
      (n) => n >= 1 && n <= last,
    ),
  );
  const sorted = [...visible].sort((a, b) => a - b);

  for (const [i, n] of sorted.entries()) {
    const prev = i > 0 ? sorted[i - 1] : undefined;

    // Add ellipsis or fill single gap
    if (prev !== undefined) {
      const gap = n - prev;
      if (gap === 2) {
        items.push({ type: "page", number: prev + 1 });
      } else if (gap > 2) {
        items.push({ type: "ellipsis" });
      }
    }

    items.push({ type: "page", number: n });
  }
}

const hasPrev = current > 1;
const hasNext = current < last;
---

{
  last > 1 && (
    <nav
      class="pagination"
      aria-label={t("common:components.paginator.pagination")}
    >
      <a
        href={hasPrev ? page.url.prev : undefined}
        class="pagination-arrow"
        aria-label={t("common:components.paginator.previousPage")}
        aria-disabled={!hasPrev}
        rel={hasPrev ? "prev" : undefined}
      >
        <MaskIcon
          src={icons.mask("chevron-left")}
          size="1.25em"
          rtl={dir === "rtl"}
        />
      </a>

      <ul class="pagination-list">
        {items.map((item) => {
          if (item.type === "ellipsis") {
            return (
              <li class="pagination-separator" aria-hidden="true">
                <span class="pagination-ellipsis">…</span>
              </li>
            );
          }

          const n = item.number;
          const href = getHrefForPage(n);
          const isCurrent = n === current;

          return (
            <li>
              <a
                href={href}
                class="pagination-page"
                aria-label={t("common:components.paginator.page", { n })}
                aria-current={isCurrent ? "page" : undefined}
              >
                {localizeNumber(n)}
              </a>
            </li>
          );
        })}
      </ul>

      <a
        href={hasNext ? page.url.next : undefined}
        class="pagination-arrow"
        aria-label={t("common:components.paginator.nextPage")}
        aria-disabled={!hasNext}
        rel={hasNext ? "next" : undefined}
      >
        <MaskIcon
          src={icons.mask("chevron-right")}
          size="1.25em"
          rtl={dir === "rtl"}
        />
      </a>
    </nav>
  )
}

<style>
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--space-2xl);
  }

  .pagination-list {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .pagination-arrow,
  .pagination-page,
  .pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    text-decoration: none;
    font-size: var(--font-size-md);
    color: var(--heading-color);
    transition: background-color 0.15s ease;
  }

  .pagination-arrow {
    color: var(--paragraph-main);

    &:hover:not([aria-disabled="true"]) {
      background: var(--card-hover-color);
    }

    &[aria-disabled="true"] {
      opacity: 0.35;
      pointer-events: none;
      cursor: default;
    }
  }

  .pagination-page {
    &:hover {
      background: var(--card-hover-color);
    }

    &[aria-current="page"] {
      font-weight: var(--font-weight-semibold);
      background: var(--footer-color);
      pointer-events: none;
    }
  }

  .pagination-ellipsis {
    pointer-events: none;
    color: var(--paragraph-subtitle);
  }
</style>