reorganize folder

Author: yingray

src/components/HomePage.js

@@ -11,7 +11,7 @@ const Navigation = ({ className, buttonClassName }) => (
 
 Navigation.defaultProps = {
 	className: '',
-	buttonClassName: 'mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect'
+	buttonClassName: 'c-button'
 }
 
-export default Navigation
+export default Navigation

src/components/Navigation.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import Card from '../components/Card'
+
+const HomePage = () => {
+  const content = {
+    title: 'Material Design Lite',
+    article:
+      'lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now.'
+  }
+
+  return (
+    <Card title="Index">
+      <strong>
+        {content.title}
+      </strong>
+      <p>
+        {content.article}
+      </p>
+    </Card>
+  )
+}
+
+export default HomePage

src/components/TodoPage.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import Card from '../components/Card'
+import TodoFooter from '../components/TodoFooter'
+import AddTodo from '../containers/AddTodo'
+import VisibleTodoList from '../containers/VisibleTodoList'
+
+const TodoPage = () =>
+  <div>
+    <Card title="Redux Example - Todo List">
+      <AddTodo />
+      <VisibleTodoList />
+      <TodoFooter />
+    </Card>
+  </div>
+
+export default TodoPage

src/components/WeatherPage.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import Weather from '../containers/Weather'
+
+const WeatherPage = () =>
+  <div>
+    <h4>Weather Page</h4>
+    <Weather />
+  </div>
+
+export default WeatherPage

src/pages/Home.js

@@ -1,17 +1,17 @@
 import React from 'react'
 import { Route, IndexRoute } from 'react-router'
 import App from './components/App'
-import HomePage from './components/HomePage'
-import TodoPage from './components/TodoPage'
-import WeatherPage from './components/WeatherPage'
+import Home from './pages/Home'
+import Todo from './pages/Todo'
+import Weather from './pages/Weather'
 
 const routes = (
-	<Route path="/" component={App}>
-		<IndexRoute component={HomePage}/>
-		<Route path="home" component={HomePage}/>
-		<Route path="todo" component={TodoPage}/>
-		<Route path="weather" component={WeatherPage}/>
-	</Route>
+  <Route path="/" component={App}>
+    <IndexRoute component={Home} />
+    <Route path="home" component={Home} />
+    <Route path="todo" component={Todo} />
+    <Route path="weather" component={Weather} />
+  </Route>
 )
 
 export default routes

src/pages/Todo.js

@@ -3,7 +3,10 @@
  * Typography Settings
  -----------------------------*/
 body
-  //margin: 10px
+  max-width: 800px
+  margin: 0 auto
+  border: solid 1px #eee
+  box-sizing: border-box
 
 h1, h2, h3, h4, h5, h6
   text-align: center
@@ -14,7 +17,7 @@ label
   display: block
 a
   color: inherit
-  
+
 input
   width: 100%
   height: 40px
@@ -26,7 +29,7 @@ input
   &[type="checkbox"]
     width: 10px
     height: 10px
-  
+
 ::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder
   color: #ccc
 input:focus
@@ -53,4 +56,4 @@ strong
 main
   width: 100%
   max-width: 600px
-  margin: 0 auto
+  margin: 0 auto

src/pages/Weather.js

@@ -0,0 +1,14 @@
+/* BEM naming: component - button */
+.c-button
+  display: inline-block
+  color:#888
+  width: 100px
+  height: 30px
+  line-height: 30px
+  border: solid 1px #ccc
+  border-radius: 3px
+  text-decoration: none
+  margin: 0 10px
+  background-color: #fff
+  &:hover
+    background-color: #ddd