1 | const React = require('react');
|
2 | const {Link} = require('react-router');
|
3 | const {Modal} = require('./../src');
|
4 |
|
5 | class HomePage extends React.Component {
|
6 | constructor(props) {
|
7 | super(props);
|
8 | this.state = {
|
9 | modalIsOpen: false
|
10 | }
|
11 | }
|
12 |
|
13 | toggleModal() {
|
14 | this.setState({
|
15 | modalIsOpen: ! this.state.modalIsOpen
|
16 | })
|
17 | }
|
18 |
|
19 | render() {
|
20 | const {modalIsOpen} = this.state;
|
21 | return (<div className="tui-demo-page">
|
22 | <h1>Thinkful UI</h1>
|
23 | <p>Shared React components for various Thinkful apps. The nav above
|
24 | doesn't respond to your actual login-state, but uses a fake <code>__env.js</code> inside
|
25 | thinkful-ui.</p>
|
26 | <h3>
|
27 | <Link to="/demo">
|
28 | Interactive Component Demos
|
29 | </Link>
|
30 | </h3>
|
31 | <h3>
|
32 | <Link to="/demo/modal">
|
33 | Demo Page w/ Modal
|
34 | </Link>
|
35 | </h3>
|
36 | <h3>
|
37 | <a onClick={this.toggleModal.bind(this)}>
|
38 | Open Modal
|
39 | </a>
|
40 | </h3>
|
41 | {modalIsOpen &&
|
42 | <Modal close={this.toggleModal.bind(this)}>
|
43 | <h1> Foo barlicious</h1>
|
44 | <p>Content in ze modal</p>
|
45 | <div className="tui-modal-centered-buttons">
|
46 | <a onClick={this.toggleModal.bind(this)} className="button button__secondary">Close Modal</a>
|
47 | </div>
|
48 | </Modal>
|
49 | }
|
50 | </div>);
|
51 | }
|
52 | }
|
53 |
|
54 | module.exports = {HomePage};
|