implement time ago

package.json

@@ -50,6 +50,7 @@
     "@raycast/api": "1.38.1",
     "@raycast/utils": "1.0.3",
     "axios": "1.3.3",
+    "javascript-time-ago": "2.5.9",
     "moment": "2.29.4"
   },
   "devDependencies": {

src/mayar-balance-recent-transaction.tsx

@@ -1,19 +1,18 @@
 import { MenuBarExtra, getPreferenceValues } from "@raycast/api";
 import { Key, useEffect, useState } from "react";
 import axios from "axios";
-import moment from "moment";
+import TimeAgo from 'javascript-time-ago'
+import id from 'javascript-time-ago/locale/id'
+
+TimeAgo.addDefaultLocale(id)
+const timeAgo = new TimeAgo("id-ID")
 
 interface Data {
   statusCode: number;
   messages: string;
   data: any;
 }
 
-function UnixTime( unixTime : number): string {
-  const formattedDate = moment(unixTime).format("D MMM HH:mm");
-  return formattedDate;
-}
-
 function formatRp(value: number): string {
   const formatter = new Intl.NumberFormat("id-ID", {
     style: "currency",
@@ -86,7 +85,7 @@ export default function Command() {
         (dataTrx || []).map((trx: { id: Key | null | undefined; createdAt: number; credit: number; customer: { email: string; }; }) =>(
           <MenuBarExtra.Item
             key={trx.id}
-            title={UnixTime(trx.createdAt) + " - " + formatRp(trx.credit) + " - " + trx?.customer?.email}
+            title={timeAgo.format(trx.createdAt) + " - " + formatRp(trx.credit) + " - " + trx?.customer?.email}
             onAction={() => {
               console.log("transaction clicked");
             }}