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

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;