text: import React from "react"
  import { makeStyles } from "@material-ui/core/styles"
  import AppBar from "@material-ui/core/AppBar"
  import Toolbar from "@material-ui/core/Toolbar"
  import Typography from "@material-ui/core/Typography"
  import Button from "@material-ui/core/Button"
  
  const useStyles = makeStyles(theme => ({
    root: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      flexGrow: 1,
    },
  }))
  
  function ButtonAppBar({ name }) {
    const classes = useStyles()
    return (
      <div className={classes.root}>
        <AppBar position="static">
          <Toolbar>
            <Typography variant="h6" className={classes.title}>
              Sample App!{" "}
              <span role="img" aria-label="tada">
                🎉
              </span>
            </Typography>
            <Button color="inherit">Logged in as: {name}</Button>
          </Toolbar>
        </AppBar>
      </div>
    )
  }
  
  export default ButtonAppBar
  