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