67 lines
1.6 KiB
TypeScript
67 lines
1.6 KiB
TypeScript
|
import React from 'react'
|
||
|
|
|
||
|
|
import { ChevronIcon } from '~/components/icons/chevron'
|
||
|
|
import { ChevronDoubleIcon } from '~/components/icons/chevron-double'
|
||
|
|
|
||
|
|
interface PaginationProperties {
|
||
|
|
currentPage: number
|
||
|
|
totalPages: number
|
||
|
|
onPageChange: (page: number) => void
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Pagination: React.FC<PaginationProperties> = ({
|
||
|
|
currentPage = 1,
|
||
|
|
totalPages,
|
||
|
|
onPageChange,
|
||
|
|
}) => {
|
||
|
|
const renderPageNumbers = () => {
|
||
|
|
const pages = []
|
||
|
|
for (let index = 1; index <= totalPages; index++) {
|
||
|
|
pages.push(
|
||
|
|
<button
|
||
|
|
key={index}
|
||
|
|
onClick={() => onPageChange(index)}
|
||
|
|
className={`rounded-lg px-3 py-1 ${
|
||
|
|
currentPage === index ? 'bg-[#2E2F7C] text-white' : 'text-gray-500'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{index}
|
||
|
|
</button>,
|
||
|
|
)
|
||
|
|
}
|
||
|
|
return pages
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-center space-x-2 text-[#2E2F7C]">
|
||
|
|
<button
|
||
|
|
onClick={() => onPageChange(1)}
|
||
|
|
disabled={currentPage === 1}
|
||
|
|
>
|
||
|
|
<ChevronDoubleIcon />
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => onPageChange(currentPage - 1)}
|
||
|
|
disabled={currentPage === 1}
|
||
|
|
>
|
||
|
|
<ChevronIcon className="rotate-90" />
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{renderPageNumbers()}
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={() => onPageChange(currentPage + 1)}
|
||
|
|
disabled={currentPage === totalPages}
|
||
|
|
>
|
||
|
|
<ChevronIcon className="rotate-270" />
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => onPageChange(totalPages)}
|
||
|
|
disabled={currentPage === totalPages}
|
||
|
|
>
|
||
|
|
<ChevronDoubleIcon className="rotate-180" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|