Remove timeago-react

src/components/PageComponents/Map/NodeDetail.tsx

@@ -3,7 +3,7 @@ import { H5 } from "@app/components/UI/Typography/H5.tsx";
 import { Subtle } from "@app/components/UI/Typography/Subtle.tsx";
 import { Avatar } from "@components/UI/Avatar";
 import { Mono } from "@components/generic/Mono.tsx";
-import { TimeAgo } from "@components/generic/Table/tmp/TimeAgo.tsx";
+import { TimeAgo } from "@components/generic/TimeAgo.tsx";
 import { Protobuf } from "@meshtastic/js";
 import type { Protobuf as ProtobufType } from "@meshtastic/js";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";

src/components/generic/Table/tmp/TimeAgo.tsx

@@ -1,9 +0,0 @@
-import TimeAgoReact from "timeago-react";
-
-export interface TimeAgoProps {
-  timestamp: number;
-}
-
-export const TimeAgo = ({ timestamp }: TimeAgoProps): JSX.Element => {
-  return <TimeAgoReact datetime={timestamp} opts={{ minInterval: 10 }} />;
-};

src/components/generic/TimeAgo.tsx

@@ -0,0 +1,34 @@
+import { type JSX, useEffect, useState } from "react";
+
+export interface TimeAgoProps {
+  timestamp: number;
+}
+
+const getTimeAgo = (timestamp: number): string => {
+  const now = Date.now();
+  const secondsPast = Math.floor((now - timestamp) / 1000);
+
+  if (secondsPast < 10) return "now";
+  if (secondsPast < 60) return `${secondsPast} seconds ago`;
+  if (secondsPast < 3600) return `${Math.floor(secondsPast / 60)} minutes ago`;
+  if (secondsPast < 86400) return `${Math.floor(secondsPast / 3600)} hours ago`;
+  return `${Math.floor(secondsPast / 86400)} days ago`;
+};
+
+export const TimeAgo = ({ timestamp }: TimeAgoProps): JSX.Element => {
+  const [timeAgo, setTimeAgo] = useState(getTimeAgo(timestamp));
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeAgo(getTimeAgo(timestamp));
+    }, 10000);
+
+    return () => clearInterval(interval);
+  }, [timestamp]);
+
+  useEffect(() => {
+    setTimeAgo(getTimeAgo(timestamp));
+  }, [timestamp]);
+
+  return <span>{timeAgo}</span>;
+};