Use react-timeago for DynamicDate component, improve relative timing display

package.json

@@ -20,6 +20,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.42.1",
     "react-ogp": "^0.0.3",
+    "react-timeago": "^7.2.0",
     "sass": "^1.57.1",
     "true-myth": "^7.1.0",
     "usehooks-ts": "^2.9.1",

src/components/common/DynamicDate.tsx

@@ -1,6 +1,7 @@
 import type { FunctionComponent } from "react";
 import { useBoolean } from "usehooks-ts";
 import { format, formatDistanceToNow } from "date-fns";
+import TimeAgo from "react-timeago";
 
 type DynamicDateProps = {
   value: Date | number;
@@ -23,11 +24,8 @@ const DynamicDate: FunctionComponent<DynamicDateProps> = ({
     <button onClick={toggleFormat}>
       <span title={date.toISOString()}>
         {showAbsolute
-          ? format(date, absoluteFormat ?? "LLL do, y HH:mm:ss")
-          : formatDistanceToNow(date, {
-              includeSeconds: true,
-              addSuffix: true,
-            })}
+          ? format(date, absoluteFormat ?? "LLL do, y HH:mm:ss xxx")
+          : <TimeAgo date={date} />}
       </span>
     </button>
   );

yarn.lock

@@ -2032,6 +2032,11 @@ react-ogp@^0.0.3:
   resolved "https://registry.yarnpkg.com/react-ogp/-/react-ogp-0.0.3.tgz#f3d49ff49e593576778f6a11824a4ccb2d8b427d"
   integrity sha512-+m5my7G6dxzN79e1e/M5VV2MmM2sXrTqs+hfL8sFHsjWn4PMv3P8eD/aMSHPibvp6BYsiFCeWMMSzcqUCIQr9w==
 
+react-timeago@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/react-timeago/-/react-timeago-7.2.0.tgz#ae929d7423a63cbc3dc228e49d22fbf586d459ca"
+  integrity sha512-2KsBEEs+qRhKx/kekUVNSTIpop3Jwd7SRBm0R4Eiq3mPeswRGSsftY9FpKsE/lXLdURyQFiHeHFrIUxLYskG5g==
+
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"