icynet-admin/components/common/Paginator/Paginator.tsx

import styles from './Paginator.module.scss';
import { Pagination } from '../../../lib/types/pagination.interface';
import conditionalClass from '../../../lib/utils/conditional-class';

export const Paginator = ({
  pagination,
  setPage,
}: {
  pagination: Pagination;
  setPage: (page: number) => void;
}) => {
  // TODO: smarter page numbers
  return (
    <div className={styles.paginator}>
      <button
        className={[styles.pageButton, styles.previous].join(' ')}
        onClick={() => setPage(pagination.page - 1)}
        disabled={pagination.page <= 1}
      >
        Prev
      </button>
      {Array.from({ length: pagination.pageCount }, (_, i) => i + 1).map(
        (pageNum) => (
          <button
            key={pageNum}
            onClick={() => setPage(pageNum)}
            disabled={pageNum === pagination.page}
            className={[
              styles.pageButton,
              conditionalClass(pageNum === pagination.page, styles.current),
            ].join(' ')}
          >
            {pageNum}
          </button>
        )
      )}
      <button
        className={[styles.pageButton, styles.next].join(' ')}
        onClick={() => setPage(pagination.page + 1)}
        disabled={pagination.page + 1 > pagination.pageCount}
      >
        Next
      </button>
    </div>
  );
};