Space - Antonia

src/App.js

@@ -11,10 +11,11 @@ function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <h1 className="App-title">Application title</h1>
+        <h1 className="App-title">{timelineData.person}'s Social Media Feed</h1>
       </header>
       <main className="App-main">
       </main>
+      < Timeline events = {timelineData.events} />
     </div>
   );
 }

src/components/Timeline.js

@@ -2,9 +2,20 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-
-  return;
-}
+const Timeline = (props) => {
+  const components = props.events.map((event, i) => {
+  return (
+    <div key={i}>
+      <TimelineEvent person={event.person} status={event.status} time={event.timeStamp}/>
+      </div>
+  );
+});
+
+return(
+  <div className="timeline">
+    {components}
+    </div>
+);
+};
 
 export default Timeline;

src/components/TimelineEvent.js

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