From 1c635092be2dcb5861ea92a4cf98914042a97f0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christer=20War=C3=A9n?= <cwchristerw@gmail.com>
Date: Mon, 4 Jan 2021 20:02:16 +0200
Subject: [PATCH] Added List

---
 src/App.js   |  3 +++
 src/List.css | 15 +++++++++++++++
 src/List.js  | 29 +++++++++++++++++++++++++++++
 3 files changed, 47 insertions(+)
 create mode 100644 src/List.css
 create mode 100644 src/List.js

diff --git a/src/App.js b/src/App.js
index ab6e762..1a41271 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,8 @@ import logo from './logo.svg';
 import './App.css';
 import Timer from './Timer';
 import './Timer.css';
+import List from './List';
+import './List.css';
 
 function App() {
   return (
@@ -11,6 +13,7 @@ function App() {
       </header>
       <main className="App-content">
         <Timer />
+        <List />
       </main>
     </div>
   );
diff --git a/src/List.css b/src/List.css
new file mode 100644
index 0000000..9d7365e
--- /dev/null
+++ b/src/List.css
@@ -0,0 +1,15 @@
+.list {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+  flex: 1;
+}
+
+.timings ul {
+  list-style-type: none;
+  padding: 0;
+}
diff --git a/src/List.js b/src/List.js
new file mode 100644
index 0000000..2b2b98e
--- /dev/null
+++ b/src/List.js
@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from 'react';
+
+const List = () => {
+  let list = [];
+  if (list.length === 0) {
+    list.push('No times saved');
+  }
+
+  function clear() {
+    list = [];
+  }
+
+  return (
+    <div className="list">
+        <div className="timings">
+          <ul>
+            {list.map((item, index) => (
+            <li key={index}>{item}</li>
+            ))}
+          </ul>
+        </div>
+        <button className="button" onClick={clear}>
+        Clear list
+        </button>
+    </div>
+  );
+};
+
+export default List;