(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1import { Link } from "react-router-dom";
2
3const formatDate = (dateString, simple = true) => {
4 if (!dateString) return "";
5 const date = new Date(dateString);
6 const now = new Date();
7 const diff = now - date;
8 const minutes = Math.floor(diff / 60000);
9 const hours = Math.floor(diff / 3600000);
10 const days = Math.floor(diff / 86400000);
11 if (minutes < 1) return "just now";
12 if (minutes < 60) return `${minutes}m`;
13 if (hours < 24) return `${hours}h`;
14 if (days < 7) return `${days}d`;
15 if (simple)
16 return date.toLocaleDateString("en-US", {
17 month: "short",
18 day: "numeric",
19 });
20 return date.toLocaleString();
21};
22
23export default function UserMeta({ author, createdAt }) {
24 const authorDisplayName = author?.displayName || author?.handle || "Unknown";
25 const authorHandle = author?.handle;
26 const authorAvatar = author?.avatar;
27 const authorDid = author?.did;
28 const marginProfileUrl = authorDid ? `/profile/${authorDid}` : "#";
29
30 return (
31 <>
32 <Link to={marginProfileUrl} className="annotation-avatar-link">
33 <div className="annotation-avatar">
34 {authorAvatar ? (
35 <img src={authorAvatar} alt={authorDisplayName} />
36 ) : (
37 <span>
38 {authorDisplayName?.substring(0, 2).toUpperCase() || "??"}
39 </span>
40 )}
41 </div>
42 </Link>
43 <div className="annotation-meta">
44 <div className="annotation-author-row">
45 <Link to={marginProfileUrl} className="annotation-author-link">
46 <span className="annotation-author">{authorDisplayName}</span>
47 </Link>
48 {authorHandle && (
49 <a
50 href={`https://bsky.app/profile/${authorHandle}`}
51 target="_blank"
52 rel="noopener noreferrer"
53 className="annotation-handle"
54 >
55 @{authorHandle}
56 </a>
57 )}
58 </div>
59 <div className="annotation-time">{formatDate(createdAt)}</div>
60 </div>
61 </>
62 );
63}