Spaces:
Running
Running
| import React from 'react' | |
| export default function ListPagination({ | |
| totalItems = 0, | |
| currentPage = 1, | |
| pageSize = 50, | |
| onPageChange, | |
| loading = false, | |
| }) { | |
| const total = Math.max(0, Number(totalItems) || 0) | |
| const tamanhoPagina = Math.max(1, Number(pageSize) || 50) | |
| const totalPages = Math.max(1, Math.ceil(total / tamanhoPagina)) | |
| const paginaAtual = Math.min(Math.max(1, Number(currentPage) || 1), totalPages) | |
| const startIndex = total ? ((paginaAtual - 1) * tamanhoPagina) + 1 : 0 | |
| const endIndex = total ? Math.min(total, paginaAtual * tamanhoPagina) : 0 | |
| return ( | |
| <div className="logs-pagination"> | |
| <span>{total ? `Exibindo ${startIndex}-${endIndex} de ${total}` : 'Exibindo 0 de 0'}</span> | |
| <div className="logs-pagination-actions"> | |
| <button | |
| type="button" | |
| className="logs-pagination-icon-btn" | |
| onClick={() => onPageChange?.(1)} | |
| disabled={loading || paginaAtual <= 1} | |
| aria-label="Ir para a primeira página" | |
| title="Primeira página" | |
| > | |
| « | |
| </button> | |
| <button | |
| type="button" | |
| className="logs-pagination-icon-btn" | |
| onClick={() => onPageChange?.(Math.max(1, paginaAtual - 1))} | |
| disabled={loading || paginaAtual <= 1} | |
| aria-label="Ir para a página anterior" | |
| title="Página anterior" | |
| > | |
| ‹ | |
| </button> | |
| <span>Página {paginaAtual} de {totalPages}</span> | |
| <button | |
| type="button" | |
| className="logs-pagination-icon-btn" | |
| onClick={() => onPageChange?.(Math.min(totalPages, paginaAtual + 1))} | |
| disabled={loading || paginaAtual >= totalPages} | |
| aria-label="Ir para a próxima página" | |
| title="Próxima página" | |
| > | |
| › | |
| </button> | |
| <button | |
| type="button" | |
| className="logs-pagination-icon-btn" | |
| onClick={() => onPageChange?.(totalPages)} | |
| disabled={loading || paginaAtual >= totalPages} | |
| aria-label="Ir para a última página" | |
| title="Última página" | |
| > | |
| » | |
| </button> | |
| </div> | |
| </div> | |
| ) | |
| } | |