1import {makeStyles} from '@material-ui/core/styles';
 2import Box from '@material-ui/core/Box';
 3import clsx from 'clsx';
 4import {CSSProperties} from '@material-ui/styles';
 5
 6interface Props {
 7  className?: string;
 8  style?: CSSProperties;
 9  left?: number;
10  right?: number;
11  onClick?: () => {};
12}
13
14const CustomArrow = (props: Props) => {
15  const {className, style, onClick, left, right} = props;
16  const classes = useStyles();
17
18  return (
19    <Box
20      className={clsx(className, classes.arrow)}
21      style={{...style, left, right}}
22      onClick={onClick}
23      display="flex"
24      alignItems="center"
25      justifyContent="center"
26    />
27  );
28};
29
30const useStyles = makeStyles(theme => ({
31  arrow: {
32    zIndex: 2,
33    width: 24,
34    height: 24,
35    '&::before': {
36      fontSize: 23,
37      color: theme.palette.primary.main,
38    },
39  },
40}));
41
42export default CustomArrow;