Space-Yieni

src/App.css

@@ -3,15 +3,16 @@
   padding-bottom: 0.5rem;
   color: white;
   position: fixed;
+  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   width: 100%;
 }
 
 .App-title {
   text-align: center;
-  font-size: 1.5em;
+  font-size: 2em;
 }
 
 .App-main {
   padding-top: 7rem;
-  background-color: #E6ECF0;
+  background-color: rgb(255, 255, 255);
 }

src/App.js

@@ -1,19 +1,19 @@
 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);
 
+function App() {
+
   // Customize the code below
   return (
     <div className="App">
       <header className="App-header">
-        <h1 className="App-title">Application title</h1>
+        <h1 className="App-title">{`${timelineData.person}'s Timeline`}</h1>
       </header>
       <main className="App-main">
+        <Timeline posts={timelineData.events}/>
       </main>
     </div>
   );

src/components/Timeline.css

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

src/components/Timeline.js

@@ -1,10 +1,37 @@
 import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
+import PropTypes from 'prop-types';
 
-const Timeline = () => {
+const Timeline = (props) => {
+
+  const TimelineComps = props.posts.map( (post) => {
+    return (
+      <TimelineEvent 
+        person={post.person}
+        status={post.status}
+        timeStamp={post.timeStamp}
+        key={post.person}
+      />
+    );
+  });
+
+  return (
+    <main className='timeline'>
+      {TimelineComps}
+    </main>
+  );
 
-  return;
-}
+};
+
+Timeline.propTypes = {
+  events: PropTypes.arrayOf(
+    PropTypes.shape({
+      person: PropTypes.string.isRequired,
+      status: PropTypes.string.isRequired,
+      timeStamp: PropTypes.string.isRequired
+    })
+  )
+};
 
 export default Timeline;

src/components/TimelineEvent.css

@@ -2,8 +2,8 @@
   display: grid;
   grid-template: 2rem auto 2rem / 1fr 1fr;
   padding: 0.5rem;
-  border-bottom: 1px solid #E6ECF0;
-  background-color: #FFF;
+  border-bottom: 1px solid rgb(255, 255, 255);
+  background-color: rgb(203, 190, 233);
 }
 
 .timeline-event:hover {

src/components/TimelineEvent.js

@@ -1,10 +1,26 @@
 import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
+import PropTypes from 'prop-types';
 
-const TimelineEvent = () => {
+const TimelineEvent = (props) => {
 
-  return;
-}
+  return (
+    <section className="timeline-event">
+      <h1 className="event-person"> {props.person}</h1>
+      <p className="event-status">{props.status}</p>
+      <time className="event-time">
+        <Timestamp time={props.timeStamp}/>
+      </time>
+    </section>
+  );
+
+};
+
+TimelineEvent.propTypes = {
+  person: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  timeStamp: PropTypes.string.isRequired,
+};
 
 export default TimelineEvent;