Busqué en todas partes, vi videos y todavía no pude obtener la lógica detrás de agregar puntos suspensivos en la paginación.

Creé este componente Pagination (tenga en cuenta que este es solo un componente de muestra para demostrar mi pregunta)

 export const Pagination (props) { const {maxPages, pageNumber} = props const totalPageNumbers = [] for(let i = 1; i<= maxPages; i++){ totalPageNumbers.push(i) } return ( <div> <button disabled={pageNumber === 1}>prev</button> { totalPageNumbers.map(item, i) => ( <button onClick={() => someFunction()}> {item} </button>) } <button disabled={pageNumber === maxPages}>prev</button> </div> )}

• totalPageNumbers es una matriz de las páginas totales
• maxPages es una cadena del número total
• pageNumber es la página actual

Me gustaría mostrar algo como esto si el total de páginas es de 5 o más 1, 2, 3, 4, ..., 5

si es menos de 5, debe ser 1, 2, 3, 4

En este momento todo funciona bien, pero todas las páginas se enumeran debido al método de mapa anterior, por lo que si tengo 100, aparecerán 100. Me gustaría limitar ese número para que sea más limpio. No es necesario hacer clic en los puntos suspensivos siempre que se vean como en el ejemplo anterior, estaré muy feliz. ¡Muchas gracias por adelantado!

Por favor, ayúdenme con esta lógica, he estado atascado en esto durante las últimas 5 horas :(