1 | import { Link } from 'react-router';
|
2 | import React, { Component } from 'react';
|
3 | import { compose, defaultProps } from 'recompose';
|
4 |
|
5 | import layoutStyles from './Layout.sass';
|
6 |
|
7 |
|
8 |
|
9 | export class Layout extends Component {
|
10 | render() {
|
11 | const {
|
12 | styles: { layout, header, main, footer, logo, links },
|
13 | } = this.props;
|
14 | return (
|
15 | <div className={layout}>
|
16 | <header className={header}>
|
17 | <div className={links}>
|
18 | <Link to="/">Multi Markers</Link>
|
19 | <Link to="/layers">With layers</Link>
|
20 | <Link to="/hoverunoptim">Hover unoptim</Link>
|
21 | <Link to="/hoveroptim">Hover optim</Link>
|
22 | <Link to="/resizable">Resizable Map</Link>
|
23 | <Link to="/heatmap">Heatmap</Link>
|
24 | </div>
|
25 | <div>
|
26 | <a href="https://github.com/istarkov/google-map-clustering-example">
|
27 | Star at github.com
|
28 | </a>
|
29 | </div>
|
30 | </header>
|
31 | <main className={main}>
|
32 | {this.props.children}
|
33 | </main>
|
34 | <footer className={footer}>
|
35 | <div>
|
36 | <a href="https://github.com/istarkov">
|
37 | Ivan Starkov
|
38 | </a>
|
39 | </div>
|
40 | <div className={logo} />
|
41 | <div>
|
42 | <a href="https://twitter.com/icelabaratory">
|
43 | @icelabaratory
|
44 | </a>
|
45 | </div>
|
46 | </footer>
|
47 | </div>
|
48 | );
|
49 | }
|
50 | }
|
51 |
|
52 | export const layoutHOC = compose(
|
53 | defaultProps({
|
54 | styles: layoutStyles,
|
55 | })
|
56 | );
|
57 |
|
58 | export default layoutHOC(Layout);
|