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 ( +
    + +
    + ); + }; + + + 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;