|
|
@ -1,7 +1,4 @@ |
|
|
|
import React from "react"; |
|
|
|
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 = ({ |
|
|
|
export const Pagination = ({ |
|
|
|
gotoPage, |
|
|
|
gotoPage, |
|
|
@ -14,48 +11,51 @@ export const Pagination = ({ |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div className="flex flex-row items-center space-x-1"> |
|
|
|
<div className="flex flex-row items-center space-x-1"> |
|
|
|
<button |
|
|
|
<button |
|
|
|
className="rounded py-1 px-2 text-xs font-sansbold" |
|
|
|
className={`rounded py-1 px-2 text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`} |
|
|
|
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }} |
|
|
|
|
|
|
|
onClick={() => gotoPage(0)} |
|
|
|
onClick={() => gotoPage(0)} |
|
|
|
disabled={!canPreviousPage} |
|
|
|
disabled={!canPreviousPage} |
|
|
|
> |
|
|
|
> |
|
|
|
<img src={dobleLeftArrow} className="rotate-180 w-4 h-4" /> |
|
|
|
<img |
|
|
|
|
|
|
|
src="images/ReactTable4double-left-arrow.svg" |
|
|
|
|
|
|
|
className="rotate-180 w-4 h-4" |
|
|
|
|
|
|
|
alt="" |
|
|
|
|
|
|
|
/> |
|
|
|
</button> |
|
|
|
</button> |
|
|
|
<button |
|
|
|
<button |
|
|
|
className="rounded py-1 px-2 text-xs font-sansbold" |
|
|
|
className={`rounded py-1 px-2 text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`} |
|
|
|
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }} |
|
|
|
|
|
|
|
onClick={() => previousPage()} |
|
|
|
onClick={() => previousPage()} |
|
|
|
disabled={!canPreviousPage} |
|
|
|
disabled={!canPreviousPage} |
|
|
|
> |
|
|
|
> |
|
|
|
<img src={rightArrow} className="w-3 h-3" /> |
|
|
|
<img |
|
|
|
|
|
|
|
src="images/ReactTable4right-arrow.svg" |
|
|
|
|
|
|
|
className="w-3 h-3" |
|
|
|
|
|
|
|
alt="" |
|
|
|
|
|
|
|
/> |
|
|
|
</button> |
|
|
|
</button> |
|
|
|
<button |
|
|
|
<button |
|
|
|
className="rounded py-1 px-2 text-xs font-sansbold" |
|
|
|
className={`rounded py-1 px-2 text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`} |
|
|
|
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }} |
|
|
|
|
|
|
|
onClick={() => nextPage()} |
|
|
|
onClick={() => nextPage()} |
|
|
|
disabled={!canNextPage} |
|
|
|
disabled={!canNextPage} |
|
|
|
> |
|
|
|
> |
|
|
|
<img src={leftArrow} className="w-3 h-3" /> |
|
|
|
<img |
|
|
|
|
|
|
|
src="images/ReactTable4left-arrow.svg" |
|
|
|
|
|
|
|
className="w-3 h-3" |
|
|
|
|
|
|
|
alt="" |
|
|
|
|
|
|
|
/> |
|
|
|
</button> |
|
|
|
</button> |
|
|
|
<button |
|
|
|
<button |
|
|
|
className="rounded py-1 px-2 text-xs font-sansbold" |
|
|
|
className={`rounded py-1 px-2 text-xs font-sansbold text-[#65A9FF] bg-[#F5F9FF]`} |
|
|
|
style={{ backgroundColor: "#F5F9FF", color: "#65A9FF" }} |
|
|
|
|
|
|
|
onClick={() => gotoPage(pageCount - 1)} |
|
|
|
onClick={() => gotoPage(pageCount - 1)} |
|
|
|
disabled={!canNextPage} |
|
|
|
disabled={!canNextPage} |
|
|
|
> |
|
|
|
> |
|
|
|
<img src={dobleLeftArrow} className="w-4 h-4" /> |
|
|
|
<img |
|
|
|
|
|
|
|
src="images/ReactTable4double-left-arrow.svg" |
|
|
|
|
|
|
|
className="w-4 h-4" |
|
|
|
|
|
|
|
alt="" |
|
|
|
|
|
|
|
/> |
|
|
|
</button> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export default Pagination; |
|
|
|
export default Pagination; |
|
|
|
|
|
|
|
|
|
|
|
// Pagination.defaultProps = {
|
|
|
|
|
|
|
|
// pagintaionButtons: [
|
|
|
|
|
|
|
|
// {
|
|
|
|
|
|
|
|
// image: { dobleLeftArrow },
|
|
|
|
|
|
|
|
// click: gotoPage(0),
|
|
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
// ],
|
|
|
|
|
|
|
|
// };
|
|
|
|
|
|
|
|