add grid system and style examples.jsx

This commit is contained in:
2017-01-17 01:24:37 -08:00
parent 02a7df11f9
commit 8595209afc
3 changed files with 23 additions and 9 deletions

View File

@@ -1,5 +1,5 @@
var React = require('react');
var {Link} = require('react-router');
// var Examples = React.createClass({
// render: function () {
// return (
@@ -8,9 +8,20 @@ var React = require('react');
// }
// });
var Examples = () => {
var Examples = (props) => {
return (
<h3>Examples</h3>
);
<div>
<h1 className="text-center">Examples</h1>
<p>Here are a few example locations to try out:</p>
<ol>
<li>
<Link to='/?location=newyork'>New York, NY</Link>
</li>
<li>
<Link to='/?location=Rio'>Rio, Brazil</Link>
</li>
</ol>
</div>
)
};
module.exports = Examples;

View File

@@ -18,11 +18,14 @@ var Main = (props) => {
return (
<div>
<Nav/>
<h2>Main Component</h2>
<div className="row">
<div className="columns medium-6 large-4 small-centered">
{props.children}
</div>
</div>
</div>
);
};
}
module.exports = Main;

View File

@@ -1385,7 +1385,7 @@
/* 223 */
/***/ function(module, exports, __webpack_require__) {
eval("'use strict';\n\nvar React = __webpack_require__(8);\nvar Nav = __webpack_require__(224);\n\n// var Main = React.createClass({\n// render: function () {\n// return (\n// <div>\n// <Nav/>\n// <h2>Main Component</h2>\n// {this.props.children}\n// </div>\n//\n// );\n// }\n// });\n\nvar Main = function Main(props) {\n return React.createElement(\n 'div',\n null,\n React.createElement(Nav, null),\n React.createElement(\n 'h2',\n null,\n 'Main Component'\n ),\n props.children\n );\n};\n\nmodule.exports = Main;//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMjIzLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vL2FwcC9jb21wb25lbnRzL01haW4uanN4PzE3MTMiXSwic291cmNlc0NvbnRlbnQiOlsidmFyIFJlYWN0ID0gcmVxdWlyZSgncmVhY3QnKTtcclxudmFyIE5hdiA9IHJlcXVpcmUoJ05hdicpO1xyXG5cclxuLy8gdmFyIE1haW4gPSBSZWFjdC5jcmVhdGVDbGFzcyh7XHJcbi8vICAgcmVuZGVyOiBmdW5jdGlvbiAoKSB7XHJcbi8vICAgICByZXR1cm4gKFxyXG4vLyAgICAgICA8ZGl2PlxyXG4vLyAgICAgICAgIDxOYXYvPlxyXG4vLyAgICAgICAgIDxoMj5NYWluIENvbXBvbmVudDwvaDI+XHJcbi8vICAgICAgICAge3RoaXMucHJvcHMuY2hpbGRyZW59XHJcbi8vICAgICAgIDwvZGl2PlxyXG4vL1xyXG4vLyAgICAgKTtcclxuLy8gICB9XHJcbi8vIH0pO1xyXG5cclxudmFyIE1haW4gPSAocHJvcHMpID0+IHtcclxuICByZXR1cm4gKFxyXG4gICAgPGRpdj5cclxuICAgICAgPE5hdi8+XHJcbiAgICAgIDxoMj5NYWluIENvbXBvbmVudDwvaDI+XHJcbiAgICAgIHtwcm9wcy5jaGlsZHJlbn1cclxuICAgIDwvZGl2PlxyXG5cclxuICApO1xyXG59O1xyXG5cclxubW9kdWxlLmV4cG9ydHMgPSBNYWluO1xyXG5cblxuXG4vLyBXRUJQQUNLIEZPT1RFUiAvL1xuLy8gYXBwL2NvbXBvbmVudHMvTWFpbi5qc3giXSwibWFwcGluZ3MiOiI7O0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUNBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBSEE7QUFPQTtBQUNBOyIsInNvdXJjZVJvb3QiOiIifQ==");
eval("'use strict';\n\nvar React = __webpack_require__(8);\nvar Nav = __webpack_require__(224);\n\n// var Main = React.createClass({\n// render: function () {\n// return (\n// <div>\n// <Nav/>\n// <h2>Main Component</h2>\n// {this.props.children}\n// </div>\n//\n// );\n// }\n// });\n\nvar Main = function Main(props) {\n return React.createElement(\n 'div',\n null,\n React.createElement(Nav, null),\n React.createElement(\n 'div',\n { className: 'row' },\n React.createElement(\n 'div',\n { className: 'columns medium-6 large-4 small-centered' },\n props.children\n )\n )\n );\n};\n\nmodule.exports = Main;//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMjIzLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vL2FwcC9jb21wb25lbnRzL01haW4uanN4PzE3MTMiXSwic291cmNlc0NvbnRlbnQiOlsidmFyIFJlYWN0ID0gcmVxdWlyZSgncmVhY3QnKTtcclxudmFyIE5hdiA9IHJlcXVpcmUoJ05hdicpO1xyXG5cclxuLy8gdmFyIE1haW4gPSBSZWFjdC5jcmVhdGVDbGFzcyh7XHJcbi8vICAgcmVuZGVyOiBmdW5jdGlvbiAoKSB7XHJcbi8vICAgICByZXR1cm4gKFxyXG4vLyAgICAgICA8ZGl2PlxyXG4vLyAgICAgICAgIDxOYXYvPlxyXG4vLyAgICAgICAgIDxoMj5NYWluIENvbXBvbmVudDwvaDI+XHJcbi8vICAgICAgICAge3RoaXMucHJvcHMuY2hpbGRyZW59XHJcbi8vICAgICAgIDwvZGl2PlxyXG4vL1xyXG4vLyAgICAgKTtcclxuLy8gICB9XHJcbi8vIH0pO1xyXG5cclxudmFyIE1haW4gPSAocHJvcHMpID0+IHtcclxuICByZXR1cm4gKFxyXG4gICAgPGRpdj5cclxuICAgICAgPE5hdi8+XHJcbiAgICAgIDxkaXYgY2xhc3NOYW1lPVwicm93XCI+XHJcbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJjb2x1bW5zIG1lZGl1bS02IGxhcmdlLTQgc21hbGwtY2VudGVyZWRcIj5cclxuICAgICAgICAgIHtwcm9wcy5jaGlsZHJlbn1cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuXHJcbiAgKTtcclxufVxyXG5cclxubW9kdWxlLmV4cG9ydHMgPSBNYWluO1xyXG5cblxuXG4vLyBXRUJQQUNLIEZPT1RFUiAvL1xuLy8gYXBwL2NvbXBvbmVudHMvTWFpbi5qc3giXSwibWFwcGluZ3MiOiI7O0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUNBO0FBQ0E7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQ0E7QUFEQTtBQURBO0FBRkE7QUFVQTtBQUNBOyIsInNvdXJjZVJvb3QiOiIifQ==");
/***/ },
/* 224 */
@@ -1577,7 +1577,7 @@
/* 255 */
/***/ function(module, exports, __webpack_require__) {
eval("'use strict';\n\nvar React = __webpack_require__(8);\n\n// var Examples = React.createClass({\n// render: function () {\n// return (\n// <h3>Examples Component</h3>\n// );\n// }\n// });\n\nvar Examples = function Examples() {\n return React.createElement(\n 'h3',\n null,\n 'Examples'\n );\n};\nmodule.exports = Examples;//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMjU1LmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vL2FwcC9jb21wb25lbnRzL0V4YW1wbGVzLmpzeD9iYzYzIl0sInNvdXJjZXNDb250ZW50IjpbInZhciBSZWFjdCA9IHJlcXVpcmUoJ3JlYWN0Jyk7XHJcblxyXG4vLyB2YXIgRXhhbXBsZXMgPSBSZWFjdC5jcmVhdGVDbGFzcyh7XHJcbi8vICAgcmVuZGVyOiBmdW5jdGlvbiAoKSB7XHJcbi8vICAgICByZXR1cm4gKFxyXG4vLyAgICAgICA8aDM+RXhhbXBsZXMgQ29tcG9uZW50PC9oMz5cclxuLy8gICAgICk7XHJcbi8vICAgfVxyXG4vLyB9KTtcclxuXHJcbnZhciBFeGFtcGxlcyA9ICgpID0+IHtcclxuICByZXR1cm4gKFxyXG4gICAgPGgzPkV4YW1wbGVzPC9oMz5cclxuICApO1xyXG59O1xyXG5tb2R1bGUuZXhwb3J0cyA9IEV4YW1wbGVzO1xyXG5cblxuXG4vLyBXRUJQQUNLIEZPT1RFUiAvL1xuLy8gYXBwL2NvbXBvbmVudHMvRXhhbXBsZXMuanN4Il0sIm1hcHBpbmdzIjoiOztBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBRUE7Iiwic291cmNlUm9vdCI6IiJ9");
eval("'use strict';\n\nvar React = __webpack_require__(8);\n\nvar _require = __webpack_require__(166),\n Link = _require.Link;\n// var Examples = React.createClass({\n// render: function () {\n// return (\n// <h3>Examples Component</h3>\n// );\n// }\n// });\n\nvar Examples = function Examples(props) {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'h1',\n { className: 'text-center' },\n 'Examples'\n ),\n React.createElement(\n 'p',\n null,\n 'Here are a few example locations to try out:'\n ),\n React.createElement(\n 'ol',\n null,\n React.createElement(\n 'li',\n null,\n React.createElement(\n Link,\n { to: '/?location=newyork' },\n 'New York, NY'\n )\n ),\n React.createElement(\n 'li',\n null,\n React.createElement(\n Link,\n { to: '/?location=Rio' },\n 'Rio, Brazil'\n )\n )\n )\n );\n};\nmodule.exports = Examples;//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMjU1LmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vL2FwcC9jb21wb25lbnRzL0V4YW1wbGVzLmpzeD9iYzYzIl0sInNvdXJjZXNDb250ZW50IjpbInZhciBSZWFjdCA9IHJlcXVpcmUoJ3JlYWN0Jyk7XHJcbnZhciB7TGlua30gPSByZXF1aXJlKCdyZWFjdC1yb3V0ZXInKTtcclxuLy8gdmFyIEV4YW1wbGVzID0gUmVhY3QuY3JlYXRlQ2xhc3Moe1xyXG4vLyAgIHJlbmRlcjogZnVuY3Rpb24gKCkge1xyXG4vLyAgICAgcmV0dXJuIChcclxuLy8gICAgICAgPGgzPkV4YW1wbGVzIENvbXBvbmVudDwvaDM+XHJcbi8vICAgICApO1xyXG4vLyAgIH1cclxuLy8gfSk7XHJcblxyXG52YXIgRXhhbXBsZXMgPSAocHJvcHMpID0+IHtcclxuICByZXR1cm4gKFxyXG4gICAgPGRpdj5cclxuICAgICAgPGgxIGNsYXNzTmFtZT1cInRleHQtY2VudGVyXCI+RXhhbXBsZXM8L2gxPlxyXG4gICAgICA8cD5IZXJlIGFyZSBhIGZldyBleGFtcGxlIGxvY2F0aW9ucyB0byB0cnkgb3V0OjwvcD5cclxuICAgICAgPG9sPlxyXG4gICAgICAgIDxsaT5cclxuICAgICAgICAgIDxMaW5rIHRvPScvP2xvY2F0aW9uPW5ld3lvcmsnPk5ldyBZb3JrLCBOWTwvTGluaz5cclxuICAgICAgICA8L2xpPlxyXG4gICAgICAgIDxsaT5cclxuICAgICAgICAgIDxMaW5rIHRvPScvP2xvY2F0aW9uPVJpbyc+UmlvLCBCcmF6aWw8L0xpbms+XHJcbiAgICAgICAgPC9saT5cclxuICAgICAgPC9vbD5cclxuICAgIDwvZGl2PlxyXG4gIClcclxufTtcclxubW9kdWxlLmV4cG9ydHMgPSBFeGFtcGxlcztcclxuXG5cblxuLy8gV0VCUEFDSyBGT09URVIgLy9cbi8vIGFwcC9jb21wb25lbnRzL0V4YW1wbGVzLmpzeCJdLCJtYXBwaW5ncyI6Ijs7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFDQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQURBO0FBR0E7QUFBQTtBQUFBO0FBQ0E7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQURBO0FBSkE7QUFIQTtBQWFBOyIsInNvdXJjZVJvb3QiOiIifQ==");
/***/ },
/* 256 */