-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathDemystifyShell.jsx
More file actions
66 lines (60 loc) · 1.78 KB
/
Copy pathDemystifyShell.jsx
File metadata and controls
66 lines (60 loc) · 1.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import React from 'react';
import { Link } from 'react-router-dom';
import useDemystifyTheme from './useDemystifyTheme';
import '../../styles/Demystify.css';
/**
* Chrome shared by every /demystify page: the palette, the masthead, and the
* footer toolbar. Site navigation is hidden under /demystify (see Layout.jsx),
* so the breadcrumb here is the only way back out.
*/
const DemystifyShell = ({
brand,
tagline,
backTo,
backLabel,
footerNote,
toolbar,
children,
}) => {
const { themeLabel, cycleTheme } = useDemystifyTheme();
return (
<div className="dm-root">
<div className="dm-container">
<header className="dm-header">
<div className="dm-masthead">
{backTo && (
<Link className="dm-uplink" to={backTo}>
[← {backLabel}]
</Link>
)}
<h1 className="dm-brand">{brand}</h1>
{tagline && <p className="dm-tagline">{tagline}</p>}
</div>
<div className="dm-subbrand">
TRUST ME BRO<sup>TM</sup>
</div>
</header>
<main className="dm-main">{children}</main>
<footer className="dm-footer">
<div className="dm-footer-note">
<span>DEMYSTIFY</span>
<span className="dm-dot">•</span>
<span>{footerNote || 'MINIMALIST ARCHIVE'}</span>
</div>
<div className="dm-toolbar">
{toolbar}
<button
type="button"
className="dm-toggle"
onClick={cycleTheme}
aria-label={`Change colour theme, currently ${themeLabel}`}
>
THEME [{themeLabel}]
</button>
</div>
</footer>
</div>
</div>
);
};
export default DemystifyShell;