paranormal/dist/legacy/app/App.js

Phenomenal Code Examples

'use strict';

exports.__esModule = true;

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

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 }; }

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

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

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

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

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

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

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

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

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

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

var App = function (_React$Component) {
  (0, _inherits3.default)(App, _React$Component);

  function App() {
    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, App);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = {
      active: _this.props.examples[0].href
    }, _this.handleChange = function (event) {
      console.log(event.target.value);
      _this.setState({ active: event.target.value });
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  App.prototype.render = function 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(function (example) {
            return _react2.default.createElement(
              'option',
              { key: example.href, value: example.href },
              example.title
            );
          })
        )
      ),
      _react2.default.createElement(ExampleFrame, { src: this.state.active })
    );
  };

  return App;
}(_react2.default.Component);

exports.default = App;