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    position: 'fixed',
35    zIndex: 0,
36    width: 40,
37    minHeight: '100vh',
38    alignItems: 'center',
39    justifyContent: 'center',
40    transition: 'background-color 0.3s ease, box-shadow 0.3s ease',
41    '&:not(.slick-disabled)': {
42      backgroundColor: 'rgba(255,255,255,1)',
43      boxShadow: '0 0 6px rgb(1 1 1 / 20%)',
44    },
45    '&:not(.slick-disabled):hover': {
46      boxShadow: '0 0 1px rgb(1 1 1 / 20%)',
47    },
48    '&::before': {
49      fontSize: 23,
50      color: theme.palette.primary.main,
51    },
52  },
53}));
54
55export default CustomArrow;