cmd/web/js/header_footer.jsx

   1 import React from 'react';
   2
   3 class Signout extends React.Component {
   4   render = () => {
   5     return <a href="/signout"><u>Logout</u></a>;
   6   }
   7 }
   8
   9 class MyAccount extends React.Component {
  10   render = () => {
  11     return <a href="/account"><u>Account</u></a>;
  12   }
  13 }
  14
  15 class Logo extends React.Component {
  16   render() {
  17     return <div id="logo" className="w-100 h-100 align-self-center">
  18              <h1><a href="/">CryptoPF</a></h1>
  19            </div>;
  20   }
  21 }
  22
  23 class Footer extends React.Component {
  24   render = () => {
  25     var elements = this.props.elements;
  26     if (elements === undefined) {
  27       elements = [];
  28     }
  29
  30     if (this.props.isLoggedIn === true) {
  31       elements = elements.concat(<MyAccount />);
  32       elements = elements.concat(<Signout />);
  33     }
  34
  35     if (elements.length > 0) {
  36       elements = [<hr key="hr"/>].concat(elements);
  37     }
  38
  39     var rows = elements.map(function(element, i) {
  40       return <div className="row text-center"  key={'footer-el-' + i}>
  41                <div className="col-12">
  42                  {element}
  43                </div>
  44              </div>;
  45     });
  46     return <div id="footer" className="row">
  47              <div className="offset-4 col-4 d-md-none">
  48                {rows}
  49              </div>
  50            </div>;
  51   }
  52 }
  53
  54 class Header extends React.Component {
  55   render = () => {
  56     var elements = this.props.elements;
  57     if (elements === undefined) {
  58       elements = [];
  59     }
  60
  61     if (this.props.isLoggedIn === true) {
  62       elements = elements.concat(<MyAccount />);
  63       elements = elements.concat(<Signout />);
  64     }
  65
  66     elements = elements.map(function(element, i) {
  67       return <div className="text-center header-menu-section"  key={'header-el-' + i}>
  68                {element}
  69              </div>;
  70     });
  71
  72     return <div id="header" className="row">
  73               <div className="offset-3 col-6 offset-md-4 col-md-4">
  74                 <Logo />
  75               </div>
  76               <div className="col-3 col-md-4 align-self-center h-100 d-none d-md-flex justify-content-end">
  77                 {elements}
  78               </div>
  79            </div>;
  80   }
  81 }
  82
  83 export {
  84   Header,
  85   Footer,
  86 };