leaflet.pub
a tool for shared writing and social publishing
add more resolution to timeAgo, show createdAt on comments
cozylittle.house
+16
-2
+10
-2
app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx
+10
-2
app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx
···
119
119
}) => {
120
120
const did = props.comment.bsky_profiles?.did;
121
121
122
+
let timeAgoDate = timeAgo(props.record.createdAt);
123
+
const formattedDate = useLocalizedDate(props.record.createdAt, {
124
+
year: "numeric",
125
+
month: "long",
126
+
day: "2-digit",
127
+
});
128
+
122
129
return (
123
130
<div id={props.comment.uri} className="comment">
124
131
<div className="flex gap-2">
125
-
{did && (
132
+
{did ? (
126
133
<ProfilePopover
127
134
didOrHandle={did}
128
135
trigger={
···
131
138
</div>
132
139
}
133
140
/>
134
-
)}
141
+
) : null}
142
+
<div className="text-sm text-tertiary">{timeAgoDate}</div>
135
143
</div>
136
144
{props.record.attachment &&
137
145
PubLeafletComment.isLinearDocumentQuote(props.record.attachment) && (
+6
src/utils/timeAgo.ts
+6
src/utils/timeAgo.ts
···
6
6
const diffMinutes = Math.floor(diffSeconds / 60);
7
7
const diffHours = Math.floor(diffMinutes / 60);
8
8
const diffDays = Math.floor(diffHours / 24);
9
+
const diffWeeks = Math.floor(diffDays / 7);
10
+
const diffMonths = Math.floor(diffDays / 30);
9
11
const diffYears = Math.floor(diffDays / 365);
10
12
11
13
if (diffYears > 0) {
12
14
return `${diffYears} year${diffYears === 1 ? "" : "s"} ago`;
15
+
} else if (diffMonths > 0) {
16
+
return `${diffMonths} month${diffMonths === 1 ? "" : "s"} ago`;
17
+
} else if (diffWeeks > 0) {
18
+
return `${diffWeeks} week${diffWeeks === 1 ? "" : "s"} ago`;
13
19
} else if (diffDays > 0) {
14
20
return `${diffDays} day${diffDays === 1 ? "" : "s"} ago`;
15
21
} else if (diffHours > 0) {