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