From bc64cb4de973fbdbeb21bfb20c5251d270258b8e Mon Sep 17 00:00:00 2001
From: Sara Nilsen <sarabrandaoalves@gmail.com>
Date: Tue, 14 Apr 2020 19:22:23 -0700
Subject: [PATCH 1/2] timelineEvent with props: person, status, timestamp

---
 src/App.css                      |  8 ++++++++
 src/App.js                       | 15 ++++++++-------
 src/components/Timeline.js       | 31 +++++++++++++++++++++++--------
 src/components/TimelineEvent.css | 25 +++++++++++++++++++++++++
 src/components/TimelineEvent.js  | 21 +++++++++++++--------
 src/components/Timestamp.js      | 12 +++++++-----
 6 files changed, 84 insertions(+), 28 deletions(-)

diff --git a/src/App.css b/src/App.css
index e20270c..0d563c3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,9 +1,12 @@
+
 .App-header {
   background-color: #222;
   padding-bottom: 0.5rem;
   color: white;
   position: fixed;
   width: 100%;
+  z-index: 1;
+
 }
 
 .App-title {
@@ -14,4 +17,9 @@
 .App-main {
   padding-top: 7rem;
   background-color: #E6ECF0;
+  
+}
+
+.Ada-lovelace {
+  text-align: center;
 }
diff --git a/src/App.js b/src/App.js
index 76d86d2..adf9ed6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,8 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-import timelineData from './data/timeline.json';
-import Timeline from './components/Timeline';
+import React from "react";
+import "./App.css";
+import timelineData from "./data/timeline.json";
+import TimelineEvent from "./components/TimelineEvent";
+import Timeline from "./components/Timeline";
 
 function App() {
   console.log(timelineData);
@@ -11,12 +11,13 @@ function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <h1 className="App-title">Application title</h1>
+        <h1 className="Ada-lovelace">Ada Lovelace's social media</h1>
       </header>
       <main className="App-main">
+        <Timeline events={timelineData.events}/>
       </main>
     </div>
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 463eb3e..e0092d8 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -1,10 +1,25 @@
-import React from 'react';
-import './Timeline.css';
-import TimelineEvent from './TimelineEvent';
+import React from "react";
+import "./Timeline.css";
+import TimelineEvent from "./TimelineEvent";
 
-const Timeline = () => {
-  
-  return;
-}
+const Timeline = (props) => {
+  return (
+    <div>
+      {props.events.map((event) => {
+        return (
+          <TimelineEvent
+            person={event.person}
+            status={event.status}
+            timestamp={event.timeStamp}
+          />
+        );
+      })}
+    </div>
+  );
+};
 
-export default Timeline;
\ No newline at end of file
+export default Timeline;
+
+/* <TimelineEvent person="Sara" status="Hi there" timestamp="1 day ago" />
+<TimelineEvent person="Ben" status="I'm ben" timestamp="1 day ago" />
+<TimelineEvent person="Sara" status="Hi there" timestamp="1 day ago" /> */
diff --git a/src/components/TimelineEvent.css b/src/components/TimelineEvent.css
index ea6407a..16e86a8 100644
--- a/src/components/TimelineEvent.css
+++ b/src/components/TimelineEvent.css
@@ -25,3 +25,28 @@
   margin-top: 0.5rem;
   text-align: right;
 }
+
+
+.card {
+  display: block;
+  text-decoration: none;
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  margin: 0 auto;
+  margin-bottom: 3rem;
+  max-width: 30rem;
+  padding: 3rem;
+  border-radius: 8px;
+  text-align: left;
+  transition: box-shadow 0.2s ease, transform  0.2s ease;
+}
+
+.card:hover {
+  box-shadow: 0px 10px 8px rgba(0, 0, 0, 0.07);
+  border-color: white;
+  transform: translateY(-2px);
+}
+
+.card p {
+  word-break: break-all;
+}
+
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index cc476c2..07aa6f4 100644
--- a/src/components/TimelineEvent.js
+++ b/src/components/TimelineEvent.js
@@ -1,10 +1,15 @@
-import React from 'react';
-import './TimelineEvent.css';
-import Timestamp from './Timestamp';
+import React from "react";
+import "./TimelineEvent.css";
+import Timestamp from "./Timestamp";
 
-const TimelineEvent = () => {
-  
-  return;
-}
+const TimelineEvent = (props) => {
+  return (
+    <div className="card">
+      <Timestamp time={props.timestamp} />
+      <h3>{props.person}</h3>
+      <p>{props.status}</p>
+    </div>
+  );
+};
 
-export default TimelineEvent;
\ No newline at end of file
+export default TimelineEvent;
diff --git a/src/components/Timestamp.js b/src/components/Timestamp.js
index 6251538..43da179 100644
--- a/src/components/Timestamp.js
+++ b/src/components/Timestamp.js
@@ -1,14 +1,16 @@
-import React from 'react';
-import moment from 'moment';
+import React from "react";
+import moment from "moment";
 
 const Timestamp = (props) => {
   const time = moment(props.time);
-  const absolute = time.format('MMMM Do YYYY, h:mm:ss a');
+  const absolute = time.format("MMMM Do YYYY, h:mm:ss a");
   const relative = time.fromNow();
 
   return (
-    <span title={absolute}>{relative}</span>
+    <span title={absolute}>
+      {relative}
+    </span>
   );
 };
 
-export default Timestamp;
\ No newline at end of file
+export default Timestamp;

From 8154397658bf6cf5939ca52e445b0d5b113c582f Mon Sep 17 00:00:00 2001
From: Sara Nilsen <sarabrandaoalves@gmail.com>
Date: Tue, 14 Apr 2020 19:23:42 -0700
Subject: [PATCH 2/2] code is clean and with all css changes

---
 src/components/Timeline.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index e0092d8..1324b66 100644
--- a/src/components/Timeline.js
+++ b/src/components/Timeline.js
@@ -18,8 +18,6 @@ const Timeline = (props) => {
   );
 };
 
-export default Timeline;
+export default Timeline; 
+
 
-/* <TimelineEvent person="Sara" status="Hi there" timestamp="1 day ago" />
-<TimelineEvent person="Ben" status="I'm ben" timestamp="1 day ago" />
-<TimelineEvent person="Sara" status="Hi there" timestamp="1 day ago" /> */