mirror of
https://github.com/Nezumi-2711/react-training.git
synced 2026-09-22 13:38:51 +00:00
51 lines
871 B
TypeScript
51 lines
871 B
TypeScript
import styled from 'styled-components';
|
|
|
|
interface IPaginationBtn {
|
|
disabled: boolean;
|
|
}
|
|
|
|
const StyledPagination = styled.div`
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: var(--fs-sm-x);
|
|
`;
|
|
|
|
const Buttons = styled.div`
|
|
display: flex;
|
|
gap: 30px;
|
|
`;
|
|
|
|
const PaginationBtn = styled.button<IPaginationBtn>`
|
|
background-color: var(--secondary-btn-color);
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
font-weight: 500;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
|
|
padding: 5px 10px;
|
|
|
|
transition: all 0.3s;
|
|
|
|
& svg {
|
|
height: 20px;
|
|
width: 20px;
|
|
}
|
|
|
|
&:hover:not(:disabled) {
|
|
background-color: var(--primary-color);
|
|
color: var(--light-text);
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
`;
|
|
|
|
export { StyledPagination, PaginationBtn, Buttons };
|