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

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),
// },
// ],
// };