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 = ({children = null, ...props}) => {
 7  const variant = children ? 'extended' : 'round';
 8  const classes = useStyles({variant});
 9
10  return (
11    <FabMui
12      color="secondary"
13      variant={variant}
14      {...props}
15      className={classes.fab}
16    >
17      <Icon className={classes.icon}>add</Icon>
18      {children}
19    </FabMui>
20  );
21};
22
23const useStyles = makeStyles(theme => ({
24  fab: {
25    position: 'fixed',
26    right: theme.spacing(3),
27    bottom: theme.spacing(3),
28
29    [theme.breakpoints.down('sm')]: {
30      right: theme.spacing(2),
31      bottom: theme.spacing(9),
32    },
33  },
34  icon: ({variant}) => ({
35    marginRight: variant === 'extended' ? theme.spacing(1) : theme.spacing(0),
36  }),
37}));
38
39export default Fab;