1 files changed, 57 insertions, 0 deletions

diff --git a/frontend/src/components/record.js b/frontend/src/components/record.js
new file mode 100644
index 0000000..a01109c
--- /dev/null
+++ b/frontend/src/components/record.js
@@ -0,0 +1,57 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useLocation, Link } from "react-router-dom";
+
+import "./record.css"
+
+export default function Record({ name, place, portals, time, date }) {
+    // const {token} = prop;
+    const [record, setRecord] = useState(null);
+    const location = useLocation();
+
+    useEffect(() => {
+        console.log(name, place, portals, time, date);
+    })
+
+    function timeSince() {
+        const now = new Date();
+        const dateNew = new Date(date);
+      
+        const secondsPast = Math.floor((now - dateNew) / 1000);
+        console.log('Seconds past:', secondsPast);
+      
+        if (secondsPast < 60) {
+          return `${secondsPast} seconds ago`;
+        }
+        if (secondsPast < 3600) {
+          const minutes = Math.floor(secondsPast / 60);
+          return `${minutes} minutes ago`;
+        }
+        if (secondsPast < 86400) {
+          const hours = Math.floor(secondsPast / 3600);
+          return `${hours} hours ago`;
+        }
+        if (secondsPast < 2592000) {
+          const days = Math.floor(secondsPast / 86400);
+          return `${days} days ago`;
+        }
+        if (secondsPast < 31536000) {
+          const months = Math.floor(secondsPast / 2592000);
+          return `${months} months ago`;
+        }
+        const years = Math.floor(secondsPast / 31536000);
+        return `${years} years ago`;
+      }
+
+    return(
+        <div className='record-container'>
+            <span>{place}</span>
+            <div style={{display: "flex", alignItems: "center"}}>
+                <img style={{height: "40px", borderRadius: "200px"}} src="https://avatars.steamstatic.com/32d110951da2339d8b8d8419bc945d9a2b150b2a_full.jpg"></img>
+                <span style={{paddingLeft: "5px", fontFamily: "BarlowSemiCondensed-SemiBold"}}>{name}</span>
+            </div>
+            <span style={{fontFamily: "BarlowCondensed-Bold", color: "#D980FF"}}>{portals}</span>
+            <span>{time}</span>
+            <span>{timeSince()}</span>
+        </div>
+    )
+}