@soul-refiner/design-system 0.2.102 → 0.2.103

package/dist/components/atoms/index.d.ts

@@ -2,3 +2,5 @@ export { Box } from './box';
 export type { BoxProps } from './box';
 export { Display, H, P, Typography } from './typography';
 export type { DisplayProps, HeadingProps, ParagraphProps, TypographyProps, } from './typography';
+export { TimeAgo } from './time_ago';
+export type { TimeAgoProps } from './time_ago';

package/dist/components/atoms/index.js

@@ -1,2 +1,3 @@
 export { Box } from './box';
 export { Display, H, P, Typography } from './typography';
+export { TimeAgo } from './time_ago';

package/dist/components/atoms/time_ago/index.d.ts

@@ -0,0 +1,2 @@
+export { TimeAgo } from './time_ago';
+export type { TimeAgoProps } from './time_ago';

package/dist/components/atoms/time_ago/index.js

@@ -0,0 +1 @@
+export { TimeAgo } from './time_ago';

package/dist/components/atoms/time_ago/time_ago.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface TimeAgoProps extends React.PropsWithChildren {
+    date: Date;
+}
+export declare const TimeAgo: ({ date }: TimeAgoProps) => React.JSX.Element;

package/dist/components/{surfaces/post/helpers.js → atoms/time_ago/time_ago.js}

@@ -1,4 +1,9 @@
-export const abbrTimeBeforeDate = (date) => {
+'use client';
+import React from 'react';
+export const TimeAgo = ({ date }) => {
+    return React.createElement(React.Fragment, null, abbrTimeBeforeDate(date));
+};
+const abbrTimeBeforeDate = (date) => {
     const now = new Date();
     const diff = now.getTime() - date.getTime();
     if (diff < 60000) {
@@ -8,17 +13,17 @@ export const abbrTimeBeforeDate = (date) => {
     else if (diff < 3600000) {
         // under one hour
         const minutes = Math.floor(diff / 60000);
-        return `${minutes} ${minutes === 1 ? 'min' : 'mins'}`;
+        return `${minutes} ${minutes === 1 ? 'min' : 'mins'} ago`;
     }
     else if (diff < 86400000) {
         // under one day
         const hours = Math.floor(diff / 3600000);
-        return `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
+        return `${hours} ${hours === 1 ? 'hour' : 'hours'} ago`;
     }
     else if (diff < 604800000) {
         // under one week
         const days = Math.floor(diff / 86400000);
-        return `${days} ${days === 1 ? 'day' : 'days'}`;
+        return `${days} ${days === 1 ? 'day' : 'days'} ago`;
     }
     else {
         return date.toDateString().slice(4);

package/dist/components/surfaces/post/post.js

@@ -2,18 +2,18 @@
 import React from 'react';
 import styled from 'styled-components';
 import { H, P } from '../../atoms/typography';
+import { TimeAgo } from '../../atoms/time_ago/time_ago';
 import { Button } from '../../actions/button';
 import { Avatar } from '../../iconography/avatar';
 import { Lock } from '../../../icons';
-import { abbrTimeBeforeDate } from './helpers';
 export const Post = ({ actions, author, authorActive, authorHref, authorImage, avatarTooltipContent, children, content, createdDate, dropdown, hasComments, id, images, isPaywalled = false, onJoin, }) => {
     const componentId = React.useId();
     const _actions = React.Children.toArray(actions);
     const _comments = React.Children.toArray(children);
-    const subtitle = abbrTimeBeforeDate(new Date(createdDate));
     return (React.createElement(Wrapper, { id: id },
         React.createElement(Header, null,
-            React.createElement(Avatar, { href: authorHref, image: authorImage, size: 64, status: authorActive ? 'online' : undefined, subtitle: React.createElement(P, { as: "span", sx: "vertical-align: top;", "$fontSize": 14, "$lineHeight": 20 }, subtitle), title: React.createElement(H, { as: "span", "$bold": true, "$fontSize": 18, "$lineHeight": 26 }, author), textPosition: "right", tooltipContent: avatarTooltipContent }),
+            React.createElement(Avatar, { href: authorHref, image: authorImage, size: 64, status: authorActive ? 'online' : undefined, subtitle: React.createElement(P, { as: "span", sx: "vertical-align: top;", "$fontSize": 14, "$lineHeight": 20 },
+                    React.createElement(TimeAgo, { date: new Date(createdDate) })), title: React.createElement(H, { as: "span", "$bold": true, "$fontSize": 18, "$lineHeight": 26 }, author), textPosition: "right", tooltipContent: avatarTooltipContent }),
             dropdown),
         !!content?.length && (React.createElement("div", { style: { padding: 24 } },
             React.createElement(P, { "$textClampLines": isPaywalled ? 2 : undefined }, content))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.102",
+  "version": "0.2.103",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {

package/dist/components/surfaces/post/helpers.d.ts

@@ -1 +0,0 @@
-export declare const abbrTimeBeforeDate: (date: Date) => string;