31 lines
2.1 KiB
JavaScript
31 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
import {getPagesArray} from "../../../utils/Pages";
|
|
|
|
const Pagination = ({totalPages, page, changePage, viewAll}) => {
|
|
let pagesArray = getPagesArray(totalPages);
|
|
let previousPage = page !== 1 ? page - 1 : page
|
|
let nextPage = page < pagesArray.length ? page + 1 : page
|
|
|
|
return (
|
|
<section className="btnSection">
|
|
<button className="allBtn" onClick={() => viewAll()}>Показать весь список</button>
|
|
<div className="choiceBtn">
|
|
<button onClick={() => changePage(previousPage)} className="btnPrevious">
|
|
<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0.238707 8.62179L6.83881 15.7424C7.15713 16.0859 7.6732 16.0859 7.99148 15.7424L8.76127 14.9119C9.07904 14.5691 9.07965 14.0134 8.76263 13.6698L3.53193 7.99998L8.76263 2.33019C9.07965 1.98655 9.07904 1.43091 8.76127 1.08808L7.99148 0.257567C7.67316 -0.0858556 7.15709 -0.0858556 6.83881 0.257567L0.238741 7.37821C-0.0795746 7.72159 -0.0795746 8.27837 0.238707 8.62179Z" fill="black"/>
|
|
</svg>
|
|
</button>
|
|
{pagesArray.map(p =>
|
|
<button onClick={() => changePage(p)} key={p} className={page === p ? "pageBtn activePage" : "pageBtn"}>{p}</button>
|
|
)}
|
|
<button onClick={() => changePage(nextPage)} className="btnNext">
|
|
<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M8.76129 8.62179L2.16119 15.7424C1.84287 16.0859 1.3268 16.0859 1.00852 15.7424L0.238729 14.9119C-0.0790435 14.5691 -0.0796547 14.0134 0.237371 13.6698L5.46807 7.99998L0.237371 2.33019C-0.0796547 1.98655 -0.0790435 1.43091 0.238729 1.08808L1.00852 0.257567C1.32684 -0.0858556 1.84291 -0.0858556 2.16119 0.257567L8.76126 7.37821C9.07957 7.72159 9.07957 8.27837 8.76129 8.62179Z" fill="black"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Pagination; |