You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.5 KiB
61 lines
1.5 KiB
import React from "react"; |
|
|
|
export const Pagination = ({ |
|
gotoPage, |
|
canPreviousPage, |
|
previousPage, |
|
canNextPage, |
|
pageCount, |
|
nextPage, |
|
}) => { |
|
return ( |
|
<div className="flex flex-row items-center space-x-1"> |
|
<button |
|
className={`rounded py-1 px-2 text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`} |
|
onClick={() => gotoPage(0)} |
|
disabled={!canPreviousPage} |
|
> |
|
<img |
|
src="images/ReactTable4double-left-arrow.svg" |
|
className="rotate-180 w-4 h-4" |
|
alt="" |
|
/> |
|
</button> |
|
<button |
|
className={`rounded py-1 px-2 text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`} |
|
onClick={() => previousPage()} |
|
disabled={!canPreviousPage} |
|
> |
|
<img |
|
src="images/ReactTable4right-arrow.svg" |
|
className="w-3 h-3" |
|
alt="" |
|
/> |
|
</button> |
|
<button |
|
className={`rounded py-1 px-2 text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`} |
|
onClick={() => nextPage()} |
|
disabled={!canNextPage} |
|
> |
|
<img |
|
src="images/ReactTable4left-arrow.svg" |
|
className="w-3 h-3" |
|
alt="" |
|
/> |
|
</button> |
|
<button |
|
className={`rounded py-1 px-2 text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`} |
|
onClick={() => gotoPage(pageCount - 1)} |
|
disabled={!canNextPage} |
|
> |
|
<img |
|
src="images/ReactTable4double-left-arrow.svg" |
|
className="w-4 h-4" |
|
alt="" |
|
/> |
|
</button> |
|
</div> |
|
); |
|
}; |
|
|
|
export default Pagination;
|
|
|