github.com/shyftnetwork/go-empyrean@v1.8.3-0.20191127201940-fbfca9338f04/shyftBlockExplorerUI/src/components/nav/nav.js (about)

     1  import React from "react";
     2  import classes from './nav.css';
     3  import { Link } from 'react-router-dom'
     4  
     5  class navBar extends React.Component  {
     6  
     7    constructor(props) {
     8      super(props);
     9      this.state = {
    10        active: ""
    11      };
    12    }
    13  
    14    updateActive = (page) => {
    15      this.setState({ active: page  });
    16    }
    17  
    18    render() {
    19      return (
    20        <div>
    21          <div className={classes.navHeader}>
    22            <h5 className={classes.headerText}> Block Explorer </h5>
    23            <div className={classes.buttonContainer}>
    24              <Link to="/blocks">  
    25                <button 
    26                  className={this.state.active === "blocks" ? classes.btnActive : classes.btn}
    27                  onClick={ ()=>this.updateActive("blocks") } > 
    28                  BLOCKS 
    29                </button> 
    30              </Link>   
    31              <Link to="/transactions">  
    32                <button 
    33                  className={this.state.active === "transactions" ? classes.btnActive : classes.btn}
    34                  onClick={ ()=>this.updateActive("transactions") }> 
    35                  TRANSACTIONS 
    36                </button>
    37              </Link> 
    38              <Link to="/internalTransactions">   
    39              <button 
    40                className={this.state.active === "internal" ? classes.btnActive : classes.btn}
    41                onClick={ ()=> this.updateActive("internal") }> 
    42                INTERNAL TX 
    43              </button>     
    44              </Link> 
    45              <Link to="/accounts">  
    46                <button 
    47                 className={this.state.active === "accounts" ? classes.btnActive : classes.btn}
    48                  onClick={ ()=>this.updateActive("accounts") }>                 
    49                  ACCOUNTS 
    50                </button>
    51              </Link>   
    52            </div>
    53          </div>
    54        </div>
    55      )
    56    };
    57  };
    58  
    59  export default navBar;