1import React from 'react';
 2import Icon from '@material-ui/core/Icon';
 3import FabMui from '@material-ui/core/Fab';
 4import {makeStyles} from '@material-ui/core/styles';
 5
 6const Fab = ({open = false, children = null, ...props}) => {
 7  const variant = children ? 'extended' : 'round';
 8  const classes = useStyles({open, variant});
 9
10  return (
11    <div className={classes.container}>
12      <FabMui
13        className="tour_car_add1"
14        color="secondary"
15        variant={variant}
16        {...props}
17      >
18        <Icon className={classes.icon}>add</Icon>
19        {children}
20      </FabMui>
21    </div>
22  );
23};
24
25const useStyles = makeStyles(theme => ({
26  container: ({open}) => ({
27    position: 'fixed',
28    right: theme.spacing(3),
29    transition: 'all 0.3s ease',
30    bottom: open ? -theme.spacing(8) : theme.spacing(3),
31    transform: open ? 'rotate(45deg)' : '',
32    zIndex: theme.zIndex.speedDial,
33  }),
34  icon: ({variant}) => ({
35    marginRight: variant === 'extended' ? theme.spacing(1) : theme.spacing(0),
36  }),
37}));
38
39export default Fab;