@unitedstatespowersquadrons/components 1.3.3 → 1.3.4-1

package/Badges/Badge.tsx

@@ -5,8 +5,8 @@ interface Props {
   content: string;
   label?: string;
   color?: string;
-  logo?: string;
-  logoColor?: string;
+  logo?: string | undefined;
+  logoColor?: string | undefined;
 }
 
 const Badge = (props: Props) => {

package/Badges/LiveDate.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import TimeAgo from "javascript-time-ago";
+import "javascript-time-ago/locale/en";
+import Badge from "./Badge";
+import { dateBadgeColor } from "./Date";
+
+interface Props {
+  timestamp: number;
+  label?: string;
+  logo?: string;
+}
+
+const LiveDateBadge = (props: Props) => {
+  const { timestamp, label = "date", logo } = props;
+
+  const now = Math.floor(Date.now() / 1000);
+
+  const badgeTimestamp = Math.floor(new Date(timestamp).getTime() / 1000);
+  const badgeDate = new Date(badgeTimestamp * 1000);
+  const badgeDateDiff = badgeTimestamp - now;
+  const color = dateBadgeColor(badgeDateDiff);
+  const content = (new TimeAgo("en")).format(badgeDate);
+
+  return <Badge color={color} content={content} label={label} logo={logo} />;
+};
+
+export default LiveDateBadge;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.3.3",
+  "version": "1.3.4-1",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {
@@ -22,6 +22,7 @@
     "@types/rails__actioncable": "^6.1.11",
     "classnames": "^2.5.1",
     "immer": "^10.1.1",
+    "javascript-time-ago": "^2.6.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-jss": "^10.10.0",