Introduce ContentPanel

src/ContentPanel.js

@@ -0,0 +1,64 @@
+//@flow
+import React, { Component } from 'react'
+import { List, Segment, Form, Input } from 'semantic-ui-react'
+
+export default class ContentPanel extends Component {
+  handleClick = (e, item) => {
+    console.log(item.name)
+  }
+
+  currentPanel = () => {
+    switch(this.props.page) {
+      case "home":
+        return (
+          <List selection divided size="big">
+            <List.Item name="Category 1" onClick={this.handleClick}>
+              <List.Content>
+                Category 1
+              </List.Content>
+            </List.Item>
+            <List.Item name="Category 2" onClick={this.handleClick}>
+              <List.Content>
+                Category 2
+              </List.Content>
+            </List.Item>
+            <List.Item>
+              <List.Content>
+                <Input icon="add" fluid placeholder="New category..." transparent/>
+              </List.Content>
+            </List.Item>
+          </List>
+        )
+      case "run":
+        return (
+          <List selection divided size="big">
+            <List.Item name="Note 1" onClick={this.handleClick}>
+              <List.Content>
+                Note one
+              </List.Content>
+            </List.Item>
+            <List.Item name="Note 2" onClick={this.handleClick}>
+              <List.Content>
+                Note two
+              </List.Content>
+            </List.Item>
+            <List.Item>
+              <List.Content>
+                <Input icon="add" fluid placeholder="New note" transparent/>
+              </List.Content>
+            </List.Item>
+          </List>
+        )
+    }
+  }
+
+  render() {
+    return (
+      <Segment attached id="content">
+        <Form>
+          {this.currentPanel()}
+        </Form>
+      </Segment>
+    )
+  }
+}

src/Layout.js

@@ -2,6 +2,7 @@
 import React, { Component } from "react"
 import { Segment } from "semantic-ui-react"
 
+import ContentPanel from "./ContentPanel"
 import ControlPanel from "./ControlPanel"
 
 export default class Layout extends Component {
@@ -17,9 +18,7 @@ export default class Layout extends Component {
   render() {
     return (
       <div id="container">
-        <Segment attached id="content">
-          This is a segment
-        </Segment>
+        <ContentPanel changePage={this.changePage.bind(this)} page={this.state.page}/>
 
         <ControlPanel changePage={this.changePage.bind(this)} page={this.state.page}/>
       </div>

src/app.css

@@ -3,6 +3,7 @@
 }
 #content {
   min-height: 450px;
+  padding: 0px;
 }
 /*
  * This is needed because of this bug: