Pagination React Bootstrap Responsive (Show 3 dots)

index.css

  .pagination {
    margin-top: 2rem;
    li{
      margin: 0 5px ;
      line-height: 1;
      .page-link{
        &:hover{
          color: var(--color-1);
        }
      }
      span{
        padding: 0;
        border-top-right-radius:unset !important;
        border-bottom-right-radius:unset !important;
        border-color:unset;
        border: none;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #181818;
        &:hover{
          background: unset;
        }
        &.active{
          background: var(--color-4);
          border-radius: 4px !important;
        }
      }
    }
  }

index.tsx

import { memo, useMemo } from 'react';

const ITEM_PER_BLOCK = 3;
const COUNT_PER_SIDE = Math.floor(ITEM_PER_BLOCK / 2);

interface Props {
  totalPage: number;
  currentPage: number;
  onChangePage: (page: number) => void;
}

const Pagination = memo(({ totalPage, currentPage, onChangePage }: Props) => {
  const countRightSide =
    currentPage < ITEM_PER_BLOCK - COUNT_PER_SIDE
      ? ITEM_PER_BLOCK - currentPage
      : currentPage > totalPage - COUNT_PER_SIDE
      ? totalPage - currentPage
      : COUNT_PER_SIDE;
  const countLeftSide = ITEM_PER_BLOCK - countRightSide - 1;

  const listPaginationAvailable = useMemo(
    () =>
      totalPage <= ITEM_PER_BLOCK
        ? [...new Array(totalPage).fill(0).map((_, index) => index + 1)]
        : [
            ...new Array(countLeftSide)
              .fill(0)
              .map((_, index) => currentPage - (index + 1)),
            currentPage,
            ...new Array(countRightSide)
              .fill(0)
              .map((_, index) => currentPage + (index + 1)),
          ].sort((a, b) => a - b),
    [countLeftSide, countRightSide, currentPage, totalPage],
  );

  const isShowJumpLeft = listPaginationAvailable[0] - 1 > 1;
  const isShowJumpRight =
    listPaginationAvailable[listPaginationAvailable.length - 1] + 1 < totalPage;

  const onSetCurrentPage = page => onChangePage(page);

  const getJumpPrevBlock = () => {
    const newCurrentPage = currentPage - ITEM_PER_BLOCK;
    if (newCurrentPage > 1) onSetCurrentPage(newCurrentPage);
    else onSetCurrentPage(1);
  };

  const getJumpNextBlock = () => {
    const newCurrentPage = currentPage + ITEM_PER_BLOCK;
    if (newCurrentPage < totalPage) onSetCurrentPage(newCurrentPage);
    else onSetCurrentPage(totalPage);
  };

  const onPrevPage = () => {
    if (currentPage - 1 > 0) onSetCurrentPage(currentPage - 1);
  };

  const onNextPage = () => {
    if (currentPage + 1 < totalPage + 1) onSetCurrentPage(currentPage + 1);
  };

  return (
    !!totalPage && (
      <nav aria-label="Page navigation example">
        <ul className="pagination justify-content-center mb-0 flex-wrap">
          <li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
            <span className="page-link --link" onClick={onPrevPage}>
              <i className="fa-solid fa-angles-left" />
            </span>
          </li>
          {!listPaginationAvailable.includes(1) && (
            <li className="page-item" onClick={() => onSetCurrentPage(1)}>
              <span className="--link page-link">1</span>
            </li>
          )}
          {isShowJumpLeft && (
            <li className="page-item" onClick={() => getJumpPrevBlock()}>
              <span className="page-link --link">•••</span>
            </li>
          )}
          {listPaginationAvailable?.map((item, index) => (
            <li
              key={index}
              className="page-item"
              onClick={() => onSetCurrentPage(item)}
            >
              <span
                className={`--link page-link ${
                  currentPage === item ? 'active' : ''
                }`}
              >
                {item}
              </span>
            </li>
          ))}
          {isShowJumpRight && (
            <li className="page-item" onClick={() => getJumpNextBlock()}>
              <span className="page-link --link">•••</span>
            </li>
          )}
          {!listPaginationAvailable.includes(totalPage) && (
            <li
              className="page-item"
              onClick={() => onSetCurrentPage(totalPage)}
            >
              <span className="--link page-link">{totalPage}</span>
            </li>
          )}
          <li
            className={`page-item ${
              currentPage === totalPage ? 'disabled' : ''
            }`}
          >
            <span className="page-link --link" onClick={onNextPage}>
              <i className="fa-solid fa-angles-right" />
            </span>
          </li>
        </ul>
      </nav>
    )
  );
});

export default Pagination;