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.7 KiB
61 lines
1.7 KiB
import React from "react"; |
|
import dobleLeftArrow from "./double-left-arrow.svg"; |
|
import leftArrow from "./left-arrow.svg"; |
|
import rightArrow from "./right-arrow.svg"; |
|
|
|
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-bold" |
|
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }} |
|
onClick={() => gotoPage(0)} |
|
disabled={!canPreviousPage} |
|
> |
|
<img src={dobleLeftArrow} className="rotate-180 w-4 h-4" /> |
|
</button> |
|
<button |
|
className="rounded py-1 px-2 text-xs font-bold" |
|
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }} |
|
onClick={() => previousPage()} |
|
disabled={!canPreviousPage} |
|
> |
|
<img src={rightArrow} className="w-3 h-3" /> |
|
</button> |
|
<button |
|
className="rounded py-1 px-2 text-xs font-bold" |
|
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }} |
|
onClick={() => nextPage()} |
|
disabled={!canNextPage} |
|
> |
|
<img src={leftArrow} className="w-3 h-3" /> |
|
</button> |
|
<button |
|
className="rounded py-1 px-2 text-xs font-bold" |
|
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }} |
|
onClick={() => gotoPage(pageCount - 1)} |
|
disabled={!canNextPage} |
|
> |
|
<img src={dobleLeftArrow} className="w-4 h-4" /> |
|
</button> |
|
</div> |
|
); |
|
}; |
|
|
|
export default Pagination; |
|
|
|
// Pagination.defaultProps = { |
|
// pagintaionButtons: [ |
|
// { |
|
// image: { dobleLeftArrow }, |
|
// click: gotoPage(0), |
|
// }, |
|
// ], |
|
// };
|
|
|