Ports - Steph

src/App.css

@@ -1,5 +1,5 @@
 .App-header {
-  background-color: #222;
+  background-color: rgb(58, 196, 211);
   padding-bottom: 0.5rem;
   color: white;
   position: fixed;

src/App.js

@@ -4,21 +4,21 @@ 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>
+          <h1 className="App-title">Your Ada Feed</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,21 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
+
+const postData = (props) =>
+  props.events.map( (post, i) => {
+    return (
+      <TimelineEvent person={ post.person } status={ post.status } timeStamp={ post.timeStamp } />
+    )
+})
+
+const Timeline = (props) => {
   // Fill in your code here
-  return;
-}
+  return (
+    <section className="timeline">
+      { postData(props) }
+    </section>
+  )
+};
 
 export default Timeline;

src/components/TimelineEvent.js

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