jayjennings
3f6dff5f24
- Add permissions logic for status options in corrective actions. - Create tests for permissions functionality. - Implement queries for user authentication and actions management. - Develop Actions page to display and manage corrective actions. - Create authentication pages for login, setup, and password reset. - Add IncidentDetail page to view incident details and associated actions. - Implement Settings page for user management and password changes.
33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
import { ChevronLeft, ChevronRight } from 'lucide-react'
|
||
import { iconButton } from './styles'
|
||
|
||
interface PaginationProps {
|
||
page: number
|
||
pageSize: number
|
||
total: number
|
||
onPage: (page: number) => void
|
||
}
|
||
|
||
export function Pagination({ page, pageSize, total, onPage }: PaginationProps) {
|
||
const pages = Math.max(1, Math.ceil(total / pageSize))
|
||
const first = total === 0 ? 0 : (page - 1) * pageSize + 1
|
||
return (
|
||
<div className="flex items-center justify-between border-t border-line px-6 py-3 text-2xs text-muted print:hidden">
|
||
<span>
|
||
{first}–{Math.min(page * pageSize, total)} of {total}
|
||
</span>
|
||
<div className="flex items-center gap-1">
|
||
<button type="button" className={`${iconButton} disabled:opacity-30`} disabled={page <= 1} onClick={() => onPage(page - 1)} aria-label="Previous page">
|
||
<ChevronLeft size={16} />
|
||
</button>
|
||
<span>
|
||
Page {page} of {pages}
|
||
</span>
|
||
<button type="button" className={`${iconButton} disabled:opacity-30`} disabled={page >= pages} onClick={() => onPage(page + 1)} aria-label="Next page">
|
||
<ChevronRight size={16} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|