Space - Becca

src/App.css

@@ -4,6 +4,9 @@
   color: white;
   position: fixed;
   width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .App-title {
@@ -15,3 +18,8 @@
   padding-top: 7rem;
   background-color: #E6ECF0;
 }
+
+.logo {
+  max-width: 60px;
+  padding-right: 20px;
+}

src/App.js

@@ -5,18 +5,18 @@ 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>
+        <img className="logo" src={logo} alt="React logo decoration"/>
+        <h3 className="App-title">{timelineData.person}'s Social Media Feed</h3>
       </header>
       <main className="App-main">
+        <Timeline className="timeline" events={timelineData.events}/>
       </main>
     </div>
   );
 }
 
-export default App;
+export default App;

src/components/Timeline.css

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

src/components/Timeline.js

@@ -2,9 +2,26 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
+
+const Timeline = (props) => {
+
+  // map over event props to return TimelineEvent components for each element
+  const timelineEventComponents = props.events.map((event) => {
+    return (
+      <TimelineEvent
+        key={event.timeStamp}
+        person={event.person}
+        status={event.status}
+        timeStamp={event.timeStamp}
+      />
+    );
+  });
 
-  return;
+  return (
+    <ul className="timeline">
+      {timelineEventComponents}
+    </ul>
+  )
 }
 
 export default Timeline;

src/components/TimelineEvent.css

@@ -18,10 +18,11 @@
 
 .event-status {
   grid-area: 2 / 1 / span 1 / -1;
+  word-wrap: break-word;
 }
 
 .event-time {
   grid-area: 1 / 2 / span 1 / span 1;
   margin-top: 0.5rem;
   text-align: right;
-}
+}

src/components/TimelineEvent.js

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