]>
Commit | Line | Data |
---|---|---|
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 | }; |