From 57cebc91f795d3eab2ae4ec025e829f0430d21e4 Mon Sep 17 00:00:00 2001
From: samkahchiin <samkahchiin@gmail.com>
Date: Fri, 10 Apr 2020 15:04:40 +0800
Subject: [PATCH] [Finishes] Added Display

---
 src/components/Display/Display.js           | 13 +++++++++++++
 src/components/Display/Display.module.css   |  7 +++++++
 src/components/Timer/Timer.js               |  0
 src/containers/ControlPanel/ControlPanel.js |  6 ++++++
 4 files changed, 26 insertions(+)
 create mode 100644 src/components/Display/Display.js
 create mode 100644 src/components/Display/Display.module.css
 delete mode 100644 src/components/Timer/Timer.js

diff --git a/src/components/Display/Display.js b/src/components/Display/Display.js
new file mode 100644
index 0000000..248a0ba
--- /dev/null
+++ b/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;
diff --git a/src/components/Display/Display.module.css b/src/components/Display/Display.module.css
new file mode 100644
index 0000000..55bf6d2
--- /dev/null
+++ b/src/components/Display/Display.module.css
@@ -0,0 +1,7 @@
+.Display {
+
+}
+
+.Display h2 {
+  text-transform: capitalize;
+}
diff --git a/src/components/Timer/Timer.js b/src/components/Timer/Timer.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/containers/ControlPanel/ControlPanel.js b/src/containers/ControlPanel/ControlPanel.js
index 729110e..108fa92 100644
--- a/src/containers/ControlPanel/ControlPanel.js
+++ b/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>
     );
   }