frontend/containers/CarColumns/CustomArrow.tsx (view raw)
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: 20,
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 4px rgb(1 1 1 / 20%)',
44 },
45 '&:not(.slick-disabled):hover': {
46 boxShadow: '0 0 0 rgb(1 1 1 / 20%)',
47 },
48 '&::before': {
49 fontSize: 23,
50 color: theme.palette.primary.main,
51 },
52 },
53}));
54
55export default CustomArrow;