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={{
22        ...style,
23        left,
24        right,
25        display: 'flex',
26      }}
27      onClick={onClick}
28    />
29  );
30};
31
32const useStyles = makeStyles(theme => ({
33  arrow: {
34    alignItems: 'center',
35    justifyContent: 'center',
36    zIndex: 2,
37    width: 40,
38    height: '100%',
39    transition: 'background-color 0.5s ease',
40    '&:not(.slick-disabled)': {
41      backgroundColor: 'rgba(0,0,0,0.05)',
42    },
43    '&:not(.slick-disabled):hover': {
44      backgroundColor: 'rgba(0,0,0,0.1)',
45    },
46    '&::before': {
47      fontSize: 23,
48      color: theme.palette.primary.main,
49    },
50  },
51}));
52
53export default CustomArrow;