yahoi/prjtmp/src/Containers/ExamplePage/index.js

Yet Another Highly Opinionated Isomorphic Framework

import React from 'react';
import { Content, Footer, Container, Col, Row } from 'Components';
import { connect } from 'react-redux';
import styled from 'styled-components';

const Header = styled.div`
  margin: 0 auto;
  text-align: center;
`

@connect(store => ({ exampleStore: store.Example }))
export default class ExamplePage extends React.Component {

  constructor(props) {
    super();
    this.state = {
      exampleStore: props.exampleStore
    }
  }

  render() {
    return (
       <Container style={{ backgroundColor: '#ffffff' }}>
          <Row>
            <Col size={12}>
              <Header>
                <h1>Yahoi Example App</h1>
              </Header>
            </Col>
          </Row>
          <Row>
            <Col size={6}>
              You have successfuly set up the Yahoi Example App! Good Job! :-)
              <h5>Samples</h5>
              <ul style={{ fontSize: 13 }}>
                {this.state.exampleStore.exampleLinks.map(exampleLink => (
                  <li>
                    <a target='_blank' href={exampleLink.url}>{exampleLink.title}</a>
                  </li>
                ))}
              </ul>
            </Col>
            <Col size={6}>
              <img src='/Public/Images/duck.png' style={{ width: '100%' }}/>
            </Col>
          </Row>
          <Row>
            <Col size={12}>
              <Footer />
            </Col>
          </Row>
        </Container>          
    );
  }
  
}