Pagination

Visão Geral

Componente de paginação reutilizável com elipse inteligente. Renderiza controles de navegação e um contador de itens exibidos.

Localização

frontend-react/src/components/ui/Pagination.tsx

Props

Prop	Tipo	Padrão	Descrição
page	number	—	Página atual (1-indexed)
totalPages	number	—	Total de páginas
total	number	—	Total de itens
pageSize	number	—	Itens por página
onChange	(p: number) => void	—	Callback ao mudar de página
color	string	'#C5A059'	Cor da página ativa
itemLabel	string	'itens'	Label do contador (ex: "pedidos")

Comportamento

• Retorna null se totalPages <= 1 (não renderiza nada)
• Exibe o contador: "Exibindo X–Y de Z itens"
• Botões "← Anterior" e "Próxima →" são desabilitados nos limites

Algoritmo de Elipse

Condição	Páginas exibidas
totalPages <= 5	Todas as páginas
page <= 3	1 2 3 4 … N
page >= totalPages - 2	1 … N-3 N-2 N-1 N
Meio	1 … p-1 p p+1 … N

Uso

import { Pagination } from '@/components/ui';

<Pagination
  page={currentPage}
  totalPages={Math.ceil(total / PAGE_SIZE)}
  total={total}
  pageSize={PAGE_SIZE}
  onChange={setCurrentPage}
  itemLabel="pedidos"
/>

Dark Mode

Suporta dark mode via classes Tailwind:

• Fundo dos botões: dark:bg-white/[0.06]
• Texto: dark:text-gray-300 / dark:text-gray-400
• Separador superior: dark:border-gray-700

Exportação

Exportado em frontend-react/src/components/ui/index.ts como named export.