Ports - Kasey

src/App.js

@@ -12,9 +12,12 @@ class App extends Component {
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Application title</h1>
+          <h1 className="App-title">{timelineData.person}</h1>
         </header>
         <main className="App-main">
+          {/* <Timeline events={timelineData["events"] person={timelineData.person}} />
+        sooo thats not how it works, just rememnber that events just equals something, ignore it, and we can pass in multipe props but theyre still a prop? I dunno but correctness would be... */}
+        <Timeline events={timelineData["events"]} />
         </main>
       </div>
     );

src/components/Timeline.css

@@ -1,5 +1,29 @@
 .timeline {
+  list-style-type: none;
   width: 30%;
   margin: auto;
+  /* text-align: left; */
+  /* background-color: blueviolet; */
+  background-color: #f8f8f8;
+  border: 1px solid #c8c8c8;
+  border-radius: 5px;
+  /* width: 110px; */
+  text-align: center;
+  padding: 20px;
+  /* position: absolute; */
+
+  overflow-wrap: break-word;
+}
+
+.name {
   text-align: left;
+  font-weight: bold;
+
+  /* float: left; */
 }
+
+.time {
+  margin: auto;
+  float: right;
+  text-align: right;
+}

src/components/Timeline.js

@@ -2,9 +2,32 @@ import React from 'react';
 import './Timeline.css';
 import TimelineEvent from './TimelineEvent';
 
-const Timeline = () => {
-  // Fill in your code here
-  return;
-}
+const Timeline = (props) => {
+  // although why do we have to do props.events? cause itsnt 
+  // <Timeline events={timelineData.events} /> already sending it events?
+  // side question, how would you debug that?
+
+  const timelineComponents = props.events.map( (timeline, i) => {
+    return (
+      <li className="timeline" key={i}>
+        <TimelineEvent
+          person={ timeline.person }
+          status={ timeline.status }
+          time={ timeline.timeStamp } />
+      </li>
+    );
+  });
+
+    return (
+      <section >
+        <ul>
+          { timelineComponents }
+        </ul>
+      </section>
+    );
+  };
+
+
+
 
 export default Timeline;

src/components/TimelineEvent.js

@@ -2,9 +2,21 @@ import React from 'react';
 import './TimelineEvent.css';
 import Timestamp from './Timestamp';
 
-const TimelineEvent = () => {
+const TimelineEvent = (props) => {
   // Fill in your code here
-  return;
+  return (
+    <section>
+
+    {/* <h3>{ props.timestamp } </h3> */}
+
+    <h4 className="time"> <Timestamp time= { props.time }/></h4>
+      <h3 className="name">{ props.person }</h3>
+      {/* so, note to self, it has to match the name time on Timestamp */}
+    <h3>
+      { props.status}
+    </h3>
+  </section>
+  );
 }
 
 export default TimelineEvent;