frontend/containers/Fab/index.tsx (view raw)
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;