Space - Hala

src/App.js

@@ -14,6 +14,7 @@ function App() {
         <h1 className="App-title">Application title</h1>
       </header>
       <main className="App-main">
+        <Timeline timelineEvents={timelineData.events}/>
       </main>
     </div>
   );

src/components/Timeline.css

@@ -2,4 +2,5 @@
   width: 30%;
   margin: auto;
   text-align: left;
+  word-wrap: break-word;
 }

src/components/Timeline.js

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

src/components/TimelineEvent.js

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

src/components/Timestamp.js

@@ -11,4 +11,5 @@ const Timestamp = (props) => {
   );
 };
 
-export default Timestamp;
+export default Timestamp;
+