Spaces:
Running
Running
File size: 2,172 Bytes
1426bed 16b6ec3 1426bed 16b6ec3 1426bed 16b6ec3 1426bed 16b6ec3 1426bed 16b6ec3 1426bed 16b6ec3 1426bed | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 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>
)
}
|