@unitedstatespowersquadrons/components 1.3.2 → 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/Date.tsx

@@ -7,28 +7,28 @@ interface Props {
   logo?: string;
 }
 
+export const dateBadgeColor = (diff: number) => {
+  // Age
+  if      (diff <= -60 * 60 * 24 * 14) return "63a2c7";
+  else if (diff <= -60 * 60 * 24)      return "blue";
+  else if (diff <= -60 * 60)           return "green";
+  else if (diff <= -60)                return "yellowgreen";
+
+  // Expiration Time
+  else if (diff <= 60)      return "orange";
+  else if (diff <= 60 * 10) return "yellowgreen";
+  else if (diff <= 60 * 60) return "green";
+  else                      return "brightgreen";
+};
+
 const DateBadge = (props: Props) => {
   const { timestamp, label, logo } = props;
 
   const now = Math.floor(Date.now() / 1000);
   const diff = timestamp - now;
 
-  const color = () => {
-    // Age
-    if      (diff <= -60 * 60 * 24 * 14) return "63a2c7";
-    else if (diff <= -60 * 60 * 24)      return "blue";
-    else if (diff <= -60 * 60)           return "green";
-    else if (diff <= -60)                return "yellowgreen";
-
-    // Expiration Time
-    else if (diff <= 60)      return "orange";
-    else if (diff <= 60 * 10) return "yellowgreen";
-    else if (diff <= 60 * 60) return "green";
-    else                      return "brightgreen";
-  };
-
   const params = new URLSearchParams();
-  params.set("color", color());
+  params.set("color", dateBadgeColor(diff));
   if (label) params.set("label", label);
   if (logo) params.set("logo", logo);
 

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/Badges/index.ts

@@ -1,7 +1,7 @@
 import Badge from "./Badge";
 import Branch from "./Branch";
 import Commit from "./Commit";
-import Date from "./Date";
+import Date, { dateBadgeColor } from "./Date";
 import Dependency from "./Dependency";
 import Gem from "./Gem";
 import Npm from "./Npm";
@@ -14,7 +14,7 @@ import Tag from "./Tag";
 export { default as Badge } from "./Badge";
 export { default as BranchBadge } from "./Branch";
 export { default as CommitBadge } from "./Commit";
-export { default as DateBadge } from "./Date";
+export { default as DateBadge, dateBadgeColor } from "./Date";
 export { default as DependencyBadge } from "./Dependency";
 export { default as GemBadge } from "./Gem";
 export { default as NpmBadge } from "./Npm";
@@ -39,4 +39,5 @@ export default {
   Repo,
   Suite,
   Tag,
+  dateBadgeColor,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.3.2",
+  "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",