Time - Jocelyn

src/App.js

@@ -1,21 +1,18 @@
 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">
+    <section 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">
+        <Timeline events={timelineData.events}/>
       </main>
-    </div>
+    </section>
   );
 }
 

src/components/Timeline.css

@@ -1,5 +1,7 @@
 .timeline {
-  width: 30%;
+  width: 80%;
+  padding: 20px;
+  word-wrap: break-word;
   margin: auto;
   text-align: left;
 }

src/components/Timeline.js

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

src/components/TimelineEvent.css

@@ -1,6 +1,6 @@
 .timeline-event {
   display: grid;
-  grid-template: 2rem auto 2rem / 1fr 1fr;
+  grid-template: 3rem auto 2rem / 8fr 8fr;
   padding: 0.5rem;
   border-bottom: 1px solid #E6ECF0;
   background-color: #FFF;

src/components/TimelineEvent.js

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