Ports -- Kate

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "workbench.colorCustomizations": {
+    "tab.unfocusedActiveBorder": "#fff0"
+  }
+}

src/App.js

@@ -1,24 +1,20 @@
-import React, { Component } from 'react';
+import React from 'react';
 import './App.css';
 import timelineData from './data/timeline.json';
-
 import Timeline from './components/Timeline';
 
-class App extends Component {
-  render() {
-    console.log(timelineData);
-
-    // Customize the code below
-    return (
-      <div className="App">
-        <header className="App-header">
-          <h1 className="App-title">Application title</h1>
-        </header>
-        <main className="App-main">
-        </main>
-      </div>
-    );
-  }
-}
+const App = () => {
+  console.log(timelineData);
+  return (
+    <div className="App">
+      <header className="App-header">
+        <h1 className="App-title">{timelineData.person}'s Timeline</h1>
+      </header>
+      <main className="App-main">
+        <Timeline events={timelineData.events} />
+      </main>
+    </div>
+  );
+};
 
 export default App;

src/components/Timeline.css

@@ -1,5 +1,5 @@
 .timeline {
-  width: 30%;
+  width: 60%;
   margin: auto;
   text-align: left;
 }

src/components/Timeline.js

@@ -2,9 +2,18 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  // Fill in your code here
-  return;
-}
+const Timeline = props => {
+  const eventFeed = props.events.map((event, i) => {
+    return (
+      <TimelineEvent
+        key={i}
+        person={event.person}
+        status={event.status}
+        time={event.timeStamp}
+      />
+    );
+  });
 
+  return <section className="timeline">{eventFeed}</section>;
+};
 export default Timeline;

src/components/TimelineEvent.js

@@ -2,9 +2,16 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
-  // Fill in your code here
-  return;
-}
+const TimelineEvent = props => {
+  return (
+    <article className="timeline-event">
+      <p className="event-person">{props.person}</p>
+      <p className="event-status">{props.status}</p>
+      <p className="event-time">
+        <Timestamp time={props.time} />
+      </p>
+    </article>
+  );
+};
 
 export default TimelineEvent;

src/components/Timestamp.js

@@ -1,14 +1,12 @@
 import React from 'react';
 import moment from 'moment';
 
-const Timestamp = (props) => {
+const Timestamp = props => {
   const time = moment(props.time);
   const absolute = time.format('MMMM Do YYYY, h:mm:ss a');
   const relative = time.fromNow();
 
-  return (
-    <span title={absolute}>{relative}</span>
-  );
+  return <span title={absolute}>{relative}</span>;
 };
 
 export default Timestamp;

src/index.css

@@ -1,5 +1,7 @@
+@import url('https://fonts.googleapis.com/css?family=Courgette|Open+Sans&display=swap');
+
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Muli', sans-serif;
+  font-family: 'Courgette', sans-serif;
 }