From 8595209afc1cb8c43ecc96c207814625427fca1d Mon Sep 17 00:00:00 2001
From: Raghu-Ch <raghu6004@gmail.com>
Date: Tue, 17 Jan 2017 01:24:37 -0800
Subject: [PATCH] add grid system and style examples.jsx

---
 app/components/Examples.jsx | 19 +++++++++++++++----
 app/components/Main.jsx     |  9 ++++++---
 public/bundle.js            |  4 ++--
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/app/components/Examples.jsx b/app/components/Examples.jsx
index f8428b7..15403a6 100644
--- a/app/components/Examples.jsx
+++ b/app/components/Examples.jsx
@@ -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;
diff --git a/app/components/Main.jsx b/app/components/Main.jsx
index 63350ca..e415e8f 100644
--- a/app/components/Main.jsx
+++ b/app/components/Main.jsx
@@ -18,11 +18,14 @@ var Main = (props) => {
   return (
     <div>
       <Nav/>
-      <h2>Main Component</h2>
-      {props.children}
+      <div className="row">
+        <div className="columns medium-6 large-4 small-centered">
+          {props.children}
+        </div>
+      </div>
     </div>
 
   );
-};
+}
 
 module.exports = Main;
diff --git a/public/bundle.js b/public/bundle.js
index b2ba8f1..54deac5 100644
--- a/public/bundle.js
+++ b/public/bundle.js
@@ -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 */