text: import React from 'react';
  import Popover from '@material-ui/core/Popover';
  import IconButton from '@material-ui/core/IconButton';
  import PersonIcon from '@material-ui/icons/Person';
  
  export default function UserPopover(props) {
    const [anchorEl, setAnchorEl] = React.useState(null);
  
    function handleClick(event) {
      setAnchorEl(event.currentTarget);
    }
  
    function handleClose() {
      setAnchorEl(null);
    }
  
    const open = Boolean(anchorEl);
    const id = open ? 'simple-popover' : undefined;
  
    return (
      <>
        <IconButton aria-describedby={id} onClick={handleClick}>
          <PersonIcon fontSize="large" />
        </IconButton>
        <Popover
          id={id}
          open={open}
          anchorEl={anchorEl}
          onClose={handleClose}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'center'
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'center'
          }}>
          {props.children}
        </Popover>
      </>
    );
  }
  