github.com/alexdevranger/node-1.8.27@v0.0.0-20221128213301-aa5841e41d2d/dashboard/assets/components/Header.jsx (about)

     1  // @flow
     2  
     3  // Copyright 2017 The go-ethereum Authors
     4  // This file is part of the go-dubxcoin library.
     5  //
     6  // The go-dubxcoin library is free software: you can redistribute it and/or modify
     7  // it under the terms of the GNU Lesser General Public License as published by
     8  // the Free Software Foundation, either version 3 of the License, or
     9  // (at your option) any later version.
    10  //
    11  // The go-dubxcoin library is distributed in the hope that it will be useful,
    12  // but WITHOUT ANY WARRANTY; without even the implied warranty of
    13  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    14  // GNU Lesser General Public License for more details.
    15  //
    16  // You should have received a copy of the GNU Lesser General Public License
    17  // along with the go-dubxcoin library. If not, see <http://www.gnu.org/licenses/>.
    18  
    19  import React, { Component } from "react";
    20  
    21  import withStyles from "material-ui/styles/withStyles";
    22  import AppBar from "material-ui/AppBar";
    23  import Toolbar from "material-ui/Toolbar";
    24  import IconButton from "material-ui/IconButton";
    25  import Icon from "material-ui/Icon";
    26  import MenuIcon from "material-ui-icons/Menu";
    27  import Typography from "material-ui/Typography";
    28  
    29  // styles contains the constant styles of the component.
    30  const styles = {
    31    header: {
    32      height: "8%",
    33    },
    34    toolbar: {
    35      height: "100%",
    36    },
    37  };
    38  
    39  // themeStyles returns the styles generated from the theme for the component.
    40  const themeStyles = (theme: Object) => ({
    41    header: {
    42      backgroundColor: theme.palette.grey[900],
    43      color: theme.palette.getContrastText(theme.palette.grey[900]),
    44      zIndex: theme.zIndex.appBar,
    45    },
    46    toolbar: {
    47      paddingLeft: theme.spacing.unit,
    48      paddingRight: theme.spacing.unit,
    49    },
    50    title: {
    51      paddingLeft: theme.spacing.unit,
    52      fontSize: 3 * theme.spacing.unit,
    53    },
    54  });
    55  
    56  export type Props = {
    57    classes: Object, // injected by withStyles()
    58    switchSideBar: () => void,
    59  };
    60  
    61  // Header renders the header of the dashboard.
    62  class Header extends Component<Props> {
    63    render() {
    64      const { classes } = this.props;
    65  
    66      return (
    67        <AppBar
    68          position="static"
    69          className={classes.header}
    70          style={styles.header}
    71        >
    72          <Toolbar className={classes.toolbar} style={styles.toolbar}>
    73            <IconButton onClick={this.props.switchSideBar}>
    74              <Icon>
    75                <MenuIcon />
    76              </Icon>
    77            </IconButton>
    78            <Typography
    79              type="title"
    80              color="inherit"
    81              noWrap
    82              className={classes.title}
    83            >
    84              Go Ethereum Dashboard
    85            </Typography>
    86          </Toolbar>
    87        </AppBar>
    88      );
    89    }
    90  }
    91  
    92  export default withStyles(themeStyles)(Header);