| 1 | export default function Pagination({ |
| 2 | prev, |
| 3 | currentPage, |
| 4 | getPaginationGroup, |
| 5 | next, |
| 6 | pages, |
| 7 | handleActive, |
| 8 | }) { |
| 9 | return ( |
| 10 | <> |
| 11 | |
| 12 | <div className="pagination-wrap"> |
| 13 | <nav aria-label="Page navigation example"> |
| 14 | <ul className="pagination list-wrap"> |
| 15 | {getPaginationGroup.length <= 0 ? null : ( |
| 16 | <li onClick={prev} className="page-item"> |
| 17 | {currentPage === 1 ? null : ( |
| 18 | <a className="page-link"> |
| 19 | <i className="fa fa-arrow-left" /> |
| 20 | </a> |
| 21 | )} |
| 22 | </li> |
| 23 | )} |
| 24 | |
| 25 | {getPaginationGroup.map((item, index) => { |
| 26 | return ( |
| 27 | <li |
| 28 | onClick={() => handleActive(item)} |
| 29 | key={index} |
| 30 | className={ |
| 31 | currentPage === item |
| 32 | ? "page-item active" |
| 33 | : "page-item" |
| 34 | } |
| 35 | > |
| 36 | <a className="page-link">{item}</a> |
| 37 | </li> |
| 38 | ) |
| 39 | })} |
| 40 | |
| 41 | {getPaginationGroup.length <= 0 ? null : ( |
| 42 | <li onClick={next} className="page-item"> |
| 43 | {currentPage >= pages ? null : ( |
| 44 | <a className="page-link"> |
| 45 | <i className="fa fa-arrow-right" /> |
| 46 | </a> |
| 47 | )} |
| 48 | </li> |
| 49 | )} |
| 50 | </ul> |
| 51 | </nav> |
| 52 | </div> |
| 53 | |
| 54 | </> |
| 55 | ) |
| 56 | } |
huncholane