import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';

export default function ButtonAppBar() {
    return (<body style={{display:'block'}}>
            <Box sx={{flexGrow:'1', paddingTop: '64px'}}>
                <AppBar position={"relative"} sx={{minWidth:'100vh'}} >
                    <Toolbar sx={{bgcolor:'#D7BCC8'}}>
                        AetherrFlare
                        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>

                        </Typography>
                        <Button color="inherit">Home</Button>
                        <Button color="inherit">About</Button>
                        <Button color="inherit">Projects</Button>
                    </Toolbar>
                </AppBar>
                <Box sx={{ p: 2, border: '1px dashed grey' }}>
                    This Box renders as an HTML section element.
                </Box>
            </Box>
        </body>
    );
}
