Ports - Laneia

src/App.js

@@ -12,10 +12,12 @@ class App extends Component {
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Application title</h1>
+          <h1 className="App-title">Timeline</h1>
         </header>
         <main className="App-main">
+        <Timeline />
         </main>
+
       </div>
     );
   }

src/components/Timeline.css

@@ -1,5 +1,6 @@
 .timeline {
-  width: 30%;
+  width: 50%;
   margin: auto;
   text-align: left;
+  font-size: 1.5rem;
 }

src/components/Timeline.js

@@ -1,10 +1,26 @@
 import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
+import data from '../data/timeline.json';
 
 const Timeline = () => {
-  // Fill in your code here
-  return;
-}
+  render() {
+    const events = data.events;
+
+    const timelineEventComponents = events.map((event) => {
+      return (
+        <TimelineEvent
+          key={event.timeStamp}
+          person={event.person}
+          status={event.status}
+          timeStamp={event.timeStamp}
+        />
+      );
+    });
+
+  return (
+    <div className="timeline">{timelineEventComponents}</div>
+  );
+}}
 
 export default Timeline;

src/components/TimelineEvent.js

@@ -3,8 +3,21 @@ import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
 const TimelineEvent = () => {
-  // Fill in your code here
-  return;
-}
+  render() {
+    const person = this.props.person;
+    const timeStamp = this.props.timeStamp;
+    const status = this.props.status;
+
+
+    return (	    
+      <section className="timeline">	      
+        <p className="event-person">{person}</p>
+        <Timestamp
+          time={timeStamp}
+        />
+        <p className="event-status">{status}</p>
+      </section> 
+    );
+}}
 
 export default TimelineEvent;

src/components/Timestamp.js

@@ -7,7 +7,7 @@ const Timestamp = (props) => {
   const relative = time.fromNow();
 
   return (
-    <span title={absolute}>{relative}</span>
+    <span className="event-time" title={absolute}>{relative}</span>
   );
 };