paranormal/dist/modern/app/App.js

Phenomenal Code Examples

'use strict';

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const Container = _styledComponents2.default.div`
  position: relative;
  width: 100%;
  height: 100%;
`;

const NavBar = _styledComponents2.default.nav`
  position: absolute;

  top: 0;
  height: 4rem;
  left: 0;
  right: 0;
  background: black;
  color: white;

  display: flex;
  align-items: stretch;
`;

const NavItem = _styledComponents2.default.span`
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 0.5rem 1.5rem;
`;

const NavLink = NavItem.withComponent('a').extend`
  color: inherit;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
`;

const NavLogo = NavItem.extend`
  font-weight: 900;
  font-size: 1.5em;
`;

const NavSelect = _styledComponents2.default.select`
  appearance: none;
  width: auto;
  padding: 0 2em;
  border-radius: 0;
  font: inherit;
  border: none;
  margin: 0;
  background: transparent;
  color: inherit;
`;

const ExampleFrame = _styledComponents2.default.iframe`
  position: absolute;
  top: 4rem;
  bottom: 0;
  left: 0;
  right: 0;
  border: 0;
`;

class App extends _react2.default.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.state = {
      active: this.props.examples[0].href
    }, this.handleChange = event => {
      console.log(event.target.value);
      this.setState({ active: event.target.value });
    }, _temp;
  }

  render() {
    console.log(this.props);
    return _react2.default.createElement(
      Container,
      null,
      _react2.default.createElement(
        NavBar,
        null,
        _react2.default.createElement(
          NavLogo,
          null,
          '\uD83D\uDC7B'
        ),
        _react2.default.createElement(
          NavSelect,
          { onChange: this.handleChange, value: this.state.active },
          this.props.examples.map(example => {
            return _react2.default.createElement(
              'option',
              { key: example.href, value: example.href },
              example.title
            );
          })
        )
      ),
      _react2.default.createElement(ExampleFrame, { src: this.state.active })
    );
  }
}
exports.default = App;