Time - Nataliya

src/App.js

@@ -1,19 +1,16 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
 import timelineData from './data/timeline.json';
 import Timeline from './components/Timeline';
 
 function App() {
-  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">Friends Feed for {timelineData.person}</h1>
       </header>
       <main className="App-main">
+        <Timeline events={timelineData.events} />
       </main>
     </div>
   );

src/components/Timeline.css

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

src/components/Timeline.js

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

src/components/TimelineEvent.css

@@ -17,6 +17,8 @@
 }
 
 .event-status {
+  margin-top: 10px;
+  color: rgb(87, 86, 86);
   grid-area: 2 / 1 / span 1 / -1;
 }
 

src/components/TimelineEvent.js

@@ -2,9 +2,15 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
+const TimelineEvent = (props) => {
 
-  return;
-}
+  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>
+  );
+};
 
 export default TimelineEvent;