content: import React from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import Fab from '@material-ui/core/Fab';
  import AddIcon from '@material-ui/icons/Add';
  import EditIcon from '@material-ui/icons/Edit';
  import DeleteIcon from '@material-ui/icons/Delete';
  import NavigationIcon from '@material-ui/icons/Navigation';
  
  const useStyles = makeStyles(theme => ({
    fab: {
      margin: theme.spacing(1),
    },
    extendedIcon: {
      marginRight: theme.spacing(1),
    },
  }));
  
  export default function FloatingActionButtons() {
    const classes = useStyles();
  
    return (
      <div>
        <Fab color="primary" aria-label="add" className={classes.fab}>
          <AddIcon />
        </Fab>
        <Fab color="secondary" aria-label="edit" className={classes.fab}>
          <EditIcon />
        </Fab>
        <Fab variant="extended" aria-label="delete" className={classes.fab}>
          <NavigationIcon className={classes.extendedIcon} />
          Extended
        </Fab>
        <Fab disabled aria-label="delete" className={classes.fab}>
          <DeleteIcon />
        </Fab>
      </div>
    );
  }
  