add last modified timeago to scene cards

package.json

@@ -27,6 +27,7 @@
     "@types/uuid": "^9.0.0",
     "classnames": "^2.3.2",
     "clipboard": "^2.0.11",
+    "date-fns": "^2.30.0",
     "dotenv-webpack": "^8.0.1",
     "file-loader": "^6.2.0",
     "firebase": "^9.23.0",

src/components/components/SceneCard/SceneCard.component.jsx

@@ -1,6 +1,17 @@
 import React from 'react';
 import ScenePlaceholder from '../../../../assets/scene.png';
 import styles from './SceneCard.module.scss';
+import { formatDistanceToNow } from 'date-fns';
+
+function LastModified({ timestamp }) {
+  // Convert Firestore Timestamp to JavaScript Date object
+  const date = timestamp.toDate();
+
+  // Use date-fns to get "time ago" format
+  const timeAgo = formatDistanceToNow(date, { addSuffix: true });
+
+  return <p className={styles.date}>Last modified {timeAgo}</p>;
+}
 
 const SceneCard = ({ scenesData, handleSceneClick }) => (
   <div className={styles.wrapper}>
@@ -13,9 +24,9 @@ const SceneCard = ({ scenesData, handleSceneClick }) => (
       >
         <img src={ScenePlaceholder} alt="scene" className={styles.img} />
         <p className={styles.title}>{scene.data().title}</p>
-        {/* <p className={styles.date}>
-          Last modified 2 hours ago
-        </p> */}
+        <p className={styles.date}>
+          <LastModified timestamp={scene.data().updateTimestamp} />
+        </p>
       </div>
     ))}
   </div>