github.com/martinohmann/rfoutlet@v1.2.1-0.20220707195255-8a66aa411105/web/src/components/Frame.js (about)

     1  import React from 'react';
     2  import { makeStyles } from '@material-ui/core/styles';
     3  import AppBar from '@material-ui/core/AppBar';
     4  import Toolbar from '@material-ui/core/Toolbar';
     5  import Typography from '@material-ui/core/Typography';
     6  import IconButton from '@material-ui/core/IconButton';
     7  import SettingsIcon from '@material-ui/icons/Settings';
     8  import config from '../config';
     9  import { useHistory } from 'react-router-dom';
    10  
    11  const useStyles = makeStyles(theme => ({
    12    root: {
    13      flexGrow: 1,
    14    },
    15    title: {
    16      flexGrow: 1,
    17      color: theme.palette.common.white,
    18    },
    19    settings: {
    20      color: theme.palette.common.white,
    21    },
    22  }));
    23  
    24  export default function Frame({ children }) {
    25    const classes = useStyles();
    26    const history = useHistory();
    27  
    28    return (
    29      <div className={classes.root}>
    30        <AppBar position="fixed">
    31          <Toolbar>
    32            <Typography variant="h6" className={classes.title}>
    33              {config.project.name}
    34            </Typography>
    35            <IconButton className={classes.settings} onClick={() => history.push('/settings')}>
    36              <SettingsIcon />
    37            </IconButton>
    38          </Toolbar>
    39        </AppBar>
    40        {children}
    41      </div>
    42    );
    43  }