65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import styled from "styled-components";
|
||
|
|
import {buttonNames} from "../../const/buttons/names";
|
||
|
|
import {IconComponent} from "../../const/buttons/icons";
|
||
|
|
|
||
|
|
const PaginateWrapper = styled.div`
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 24px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
`
|
||
|
|
const Page = styled.button`
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
background: ${(props => props.theme.primary)};
|
||
|
|
color: ${(props => props.theme.textColor)};
|
||
|
|
border: 1px solid ${(props => props.theme.borderColor)};
|
||
|
|
font-size: 16px;
|
||
|
|
cursor: pointer;
|
||
|
|
border-radius: 4px;
|
||
|
|
|
||
|
|
transition: .4s ease;
|
||
|
|
&:hover {
|
||
|
|
background: ${(props => props.theme.background)};
|
||
|
|
}
|
||
|
|
`
|
||
|
|
|
||
|
|
interface PaginationProps {
|
||
|
|
currentPage: number;
|
||
|
|
totalPages: number;
|
||
|
|
onPrevPage: () => void;
|
||
|
|
onNextPage: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const Pagination = ({currentPage, totalPages, onPrevPage, onNextPage}: PaginationProps) => {
|
||
|
|
return (
|
||
|
|
<PaginateWrapper>
|
||
|
|
<Page
|
||
|
|
onClick={onPrevPage}
|
||
|
|
disabled={currentPage === 1}
|
||
|
|
>
|
||
|
|
<IconComponent
|
||
|
|
width="20"
|
||
|
|
height="20"
|
||
|
|
name={buttonNames[17]}
|
||
|
|
/>
|
||
|
|
</Page>
|
||
|
|
|
||
|
|
<Page
|
||
|
|
onClick={onNextPage}
|
||
|
|
disabled={currentPage === totalPages}
|
||
|
|
>
|
||
|
|
<IconComponent
|
||
|
|
width="20"
|
||
|
|
height="20"
|
||
|
|
name={buttonNames[6]}
|
||
|
|
/>
|
||
|
|
</Page>
|
||
|
|
</PaginateWrapper>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Pagination;
|