Space Sara Nilsen

src/App.css

@@ -1,9 +1,12 @@
+
 .App-header {
   background-color: #222;
   padding-bottom: 0.5rem;
   color: white;
   position: fixed;
   width: 100%;
+  z-index: 1;
+
 }
 
 .App-title {
@@ -14,4 +17,9 @@
 .App-main {
   padding-top: 7rem;
   background-color: #E6ECF0;
+
+}
+
+.Ada-lovelace {
+  text-align: center;
 }

src/App.js

@@ -1,8 +1,8 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-import timelineData from './data/timeline.json';
-import Timeline from './components/Timeline';
+import React from "react";
+import "./App.css";
+import timelineData from "./data/timeline.json";
+import TimelineEvent from "./components/TimelineEvent";
+import Timeline from "./components/Timeline";
 
 function App() {
   console.log(timelineData);
@@ -11,12 +11,13 @@ function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <h1 className="App-title">Application title</h1>
+        <h1 className="Ada-lovelace">Ada Lovelace's social media</h1>
       </header>
       <main className="App-main">
+        <Timeline events={timelineData.events}/>
       </main>
     </div>
   );
 }
 
-export default App;
+export default App;

src/components/Timeline.js

@@ -1,10 +1,23 @@
-import React from 'react';
-import './Timeline.css';
-import TimelineEvent from './TimelineEvent';
+import React from "react";
+import "./Timeline.css";
+import TimelineEvent from "./TimelineEvent";
+
+const Timeline = (props) => {
+  return (
+    <div>
+      {props.events.map((event) => {
+        return (
+          <TimelineEvent
+            person={event.person}
+            status={event.status}
+            timestamp={event.timeStamp}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default Timeline; 
 
-const Timeline = () => {
-
-  return;
-}
 
-export default Timeline;

src/components/TimelineEvent.css

@@ -25,3 +25,28 @@
   margin-top: 0.5rem;
   text-align: right;
 }
+
+
+.card {
+  display: block;
+  text-decoration: none;
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  margin: 0 auto;
+  margin-bottom: 3rem;
+  max-width: 30rem;
+  padding: 3rem;
+  border-radius: 8px;
+  text-align: left;
+  transition: box-shadow 0.2s ease, transform  0.2s ease;
+}
+
+.card:hover {
+  box-shadow: 0px 10px 8px rgba(0, 0, 0, 0.07);
+  border-color: white;
+  transform: translateY(-2px);
+}
+
+.card p {
+  word-break: break-all;
+}
+

src/components/TimelineEvent.js

@@ -1,10 +1,15 @@
-import React from 'react';
-import './TimelineEvent.css';
-import Timestamp from './Timestamp';
+import React from "react";
+import "./TimelineEvent.css";
+import Timestamp from "./Timestamp";
 
-const TimelineEvent = () => {
-
-  return;
-}
+const TimelineEvent = (props) => {
+  return (
+    <div className="card">
+      <Timestamp time={props.timestamp} />
+      <h3>{props.person}</h3>
+      <p>{props.status}</p>
+    </div>
+  );
+};
 
-export default TimelineEvent;
+export default TimelineEvent;

src/components/Timestamp.js

@@ -1,14 +1,16 @@
-import React from 'react';
-import moment from 'moment';
+import React from "react";
+import moment from "moment";
 
 const Timestamp = (props) => {
   const time = moment(props.time);
-  const absolute = time.format('MMMM Do YYYY, h:mm:ss a');
+  const absolute = time.format("MMMM Do YYYY, h:mm:ss a");
   const relative = time.fromNow();
 
   return (
-    <span title={absolute}>{relative}</span>
+    <span title={absolute}>
+      {relative}
+    </span>
   );
 };
 
-export default Timestamp;
+export default Timestamp;