frontPanel/src/ui_kit/CustomPagination.tsx

import { Pagination } from "@mui/material";
import { ChangeEvent } from "react";

interface Props {
  countPagination: number;
  page: number;
  onChange: (e: ChangeEvent<unknown>, 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",
          },
        },
      }}
    />
  );
}