69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
|
import { Pagination } from "@mui/material";
|
||
|
|
import { ChangeEvent } from "react";
|
||
|
|
interface Props {
|
||
|
|
countPagination: number;
|
||
|
|
page: number;
|
||
|
|
onChange: (e: ChangeEvent, value: number) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function CustomPagination({
|
||
|
|
countPagination,
|
||
|
|
page,
|
||
|
|
onChange,
|
||
|
|
}: Props) {
|
||
|
|
return (
|
||
|
|
<Pagination
|
||
|
|
count={countPagination}
|
||
|
|
page={page}
|
||
|
|
onChange={onChange}
|
||
|
|
sx={{
|
||
|
|
marginRight: "-15px",
|
||
|
|
marginLeft: "-15px",
|
||
|
|
marginBottom: "20px",
|
||
|
|
"& .MuiPaginationItem-root": {
|
||
|
|
height: "30px",
|
||
|
|
width: "30px",
|
||
|
|
minWidth: "30px",
|
||
|
|
marginLeft: "5px",
|
||
|
|
marginRight: "5px",
|
||
|
|
backgroundColor: "white",
|
||
|
|
color: "black",
|
||
|
|
fontSize: "16px",
|
||
|
|
lineHeight: "20px",
|
||
|
|
fontWeight: 400,
|
||
|
|
borderRadius: "5px",
|
||
|
|
"&.Mui-selected": {
|
||
|
|
backgroundColor: "white",
|
||
|
|
color: "#7E2AEA",
|
||
|
|
fontWeight: 500,
|
||
|
|
},
|
||
|
|
"&:hover": {
|
||
|
|
backgroundColor: "#ffffff55",
|
||
|
|
},
|
||
|
|
"&:active": {
|
||
|
|
backgroundColor: "#7F2CEA",
|
||
|
|
color: "white",
|
||
|
|
},
|
||
|
|
boxShadow: `
|
||
|
|
0px 77.2727px 238.773px rgba(210, 208, 225, 0.24),
|
||
|
|
0px 32.2827px 99.7535px rgba(210, 208, 225, 0.172525),
|
||
|
|
0px 17.2599px 53.333px rgba(210, 208, 225, 0.143066),
|
||
|
|
0px 9.67574px 29.8981px rgba(210, 208, 225, 0.12),
|
||
|
|
0px 5.13872px 15.8786px rgba(210, 208, 225, 0.0969343),
|
||
|
|
0px 2.13833px 6.60745px rgba(210, 208, 225, 0.0674749)
|
||
|
|
`,
|
||
|
|
},
|
||
|
|
"& .MuiPaginationItem-previousNext": {
|
||
|
|
backgroundColor: "#7E2AEA",
|
||
|
|
color: "white",
|
||
|
|
marginLeft: "15px",
|
||
|
|
marginRight: "15px",
|
||
|
|
"&:hover": {
|
||
|
|
backgroundColor: "#995DED",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|