[Finishes] Added timecontrol

src/App.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import './App.css';
+import ControlPanel from './containers/ControlPanel/ControlPanel';
 
 function App() {
   return (
     <div className="App">
+      <ControlPanel />
     </div>
   );
 }

src/components/TimeControl/TimeControl.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import classes from './TimeControl.module.css'
+
+const timeControl = (props) => {
+  return (
+    <div className={classes.TimeControl}>
+      <h1>{props.type + " Length"}</h1>
+      <p>
+        <span><i className={classes.ArrowUp}/></span>
+        <span className={classes.Duration}>{props.duration}</span>
+        <span><i className={classes.ArrowDown}/></span>
+      </p>
+    </div>
+  );
+};
+
+export default timeControl;

src/components/TimeControl/TimeControl.module.css

@@ -0,0 +1,29 @@
+.TimeControl {
+}
+
+.TimeControl h1 {
+  text-transform: capitalize;
+}
+
+.TimeControl i{
+  border: solid black;
+  border-width: 0 6px 6px 0;
+  display: inline-block;
+  padding: 5px;
+  margin: 0 10px;
+}
+
+.TimeControl .Duration {
+  font-size: 30px;
+  font-weight: bold;
+}
+
+.ArrowUp {
+  transform: rotate(-135deg);
+  -webkit-transform: rotate(-135deg);
+}
+
+.ArrowDown {
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+}

src/containers/ControlPanel/ControlPanel.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react';
+import TimeControl from '../../components/TimeControl/TimeControl';
+
+class ControlPanel extends Component {
+  render() {
+    return(
+      <TimeControl type="break" duration={3}/>
+    );
+  }
+}
+
+export default ControlPanel;