diff --git a/src/App.js b/src/App.js
index 5f4cdf8..4541c66 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,9 +12,12 @@ class App extends Component {
return (
- Application title
+ {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... */}
+
);
diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index e31f946..89eacad 100644
--- a/src/components/Timeline.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/Timeline.js b/src/components/Timeline.js
index 624d4ec..644b434 100644
--- a/src/components/Timeline.js
+++ b/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
+ // already sending it events?
+ // side question, how would you debug that?
+
+ const timelineComponents = props.events.map( (timeline, i) => {
+ return (
+
+
+
+ );
+ });
+
+ return (
+
+
+ { timelineComponents }
+
+
+ );
+ };
+
+
+
export default Timeline;
diff --git a/src/components/TimelineEvent.js b/src/components/TimelineEvent.js
index 9079165..7490a23 100644
--- a/src/components/TimelineEvent.js
+++ b/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 (
+
+
+ {/* { props.timestamp }
*/}
+
+
+ { props.person }
+ {/* so, note to self, it has to match the name time on Timestamp */}
+
+ { props.status}
+
+
+ );
}
export default TimelineEvent;