diff options
author | jloup <jeanloup.jamet@gmail.com> | 2018-05-05 12:36:58 +0200 |
---|---|---|
committer | jloup <jeanloup.jamet@gmail.com> | 2018-05-05 12:38:08 +0200 |
commit | 87b6d05e5b289f3e9d1554fe455296ba09655c3a (patch) | |
tree | bcf6a679f435216840a749a311470583cd0f05c3 /cmd/web/js/header_footer.jsx | |
parent | 8dbd9d291b203424d3c06755c7e24f71cc5b8bb7 (diff) | |
download | Front-87b6d05e5b289f3e9d1554fe455296ba09655c3a.tar.gz Front-87b6d05e5b289f3e9d1554fe455296ba09655c3a.tar.zst Front-87b6d05e5b289f3e9d1554fe455296ba09655c3a.zip |
Factorize Header/Footer code.v0.0.7
Diffstat (limited to 'cmd/web/js/header_footer.jsx')
-rw-r--r-- | cmd/web/js/header_footer.jsx | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/cmd/web/js/header_footer.jsx b/cmd/web/js/header_footer.jsx new file mode 100644 index 0000000..3cb9937 --- /dev/null +++ b/cmd/web/js/header_footer.jsx | |||
@@ -0,0 +1,78 @@ | |||
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 | }; | ||