Ellipsis Pagination

export function EllipsisPagination({ page, totalPages, onChange }) {
  const show = new Set([1, totalPages, page, page - 1, page + 1].filter((p) => p >= 1 && p <= totalPages));
  const list = [...show].sort((a, b) => a - b);
  return (
    <div className="flex items-center gap-1 text-sm">
      {list.map((p, i) => (
        <span key={p} className="flex items-center">
          {i > 0 && p - list[i - 1] > 1 && <span className="px-1 text-slate-400">…</span>}
          <button
            onClick={() => onChange(p)}
            className={`h-8 min-w-8 rounded-md px-2 font-medium
              ${p === page ? "bg-indigo-600 text-white" : "text-slate-600 hover:bg-slate-100"}`}
          >
            {p}
          </button>
        </span>
      ))}
    </div>
  );
}