[Finishes] Added Display

src/components/Display/Display.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import classes from './Display.module.css'
+
+const display = (props) => {
+  return (
+    <div className={classes.Display}>
+      <h2>{props.type}</h2>
+      <h1>{props.duration}</h1>
+    </div>
+  )
+}
+
+export default display;

src/components/Display/Display.module.css

@@ -0,0 +1,7 @@
+.Display {
+
+}
+
+.Display h2 {
+  text-transform: capitalize;
+}

src/containers/ControlPanel/ControlPanel.js

@@ -1,9 +1,14 @@
 import React, { Component } from 'react';
 import BreakControl from '../../components/TimeControl/BreakControl/BreakControl';
 import SessionControl from '../../components/TimeControl/SessionControl/SessionControl';
+import Display from '../../components/Display/Display';
+
+const BREAK = 'break';
+const SESSION = 'session';
 
 class ControlPanel extends Component {
   state = {
+    type: SESSION,
     breakLength: 1,
     sessionLength: 25
   }
@@ -49,6 +54,7 @@ class ControlPanel extends Component {
           increase={this.increaseSessionHandler}
           decrease={this.decreaseSessionHandler}
         />
+        <Display type={this.state.type} duration={this.state.sessionLength}/>
       </div>
     );
   }