Something went wrong. Try again.
(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension web atproto comments
Something went wrong. Try again.
2.0 kB · 63 lines
JSX
at ui-refactor
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364import { Link } from "react-router-dom";
const formatDate = (dateString, simple = true) => { if (!dateString) return ""; const date = new Date(dateString); const now = new Date(); const diff = now - date; const minutes = Math.floor(diff / 60000); const hours = Math.floor(diff / 3600000); const days = Math.floor(diff / 86400000); if (minutes < 1) return "just now"; if (minutes < 60) return `${minutes}m`; if (hours < 24) return `${hours}h`; if (days < 7) return `${days}d`; if (simple) return date.toLocaleDateString("en-US", { month: "short", day: "numeric", }); return date.toLocaleString();};
export default function UserMeta({ author, createdAt }) { const authorDisplayName = author?.displayName || author?.handle || "Unknown"; const authorHandle = author?.handle; const authorAvatar = author?.avatar; const authorDid = author?.did; const marginProfileUrl = authorDid ? `/profile/${authorDid}` : "#";
return ( <> <Link to={marginProfileUrl} className="annotation-avatar-link"> <div className="annotation-avatar"> {authorAvatar ? ( <img src={authorAvatar} alt={authorDisplayName} /> ) : ( <span> {authorDisplayName?.substring(0, 2).toUpperCase() || "??"} </span> )} </div> </Link> <div className="annotation-meta"> <div className="annotation-author-row"> <Link to={marginProfileUrl} className="annotation-author-link"> <span className="annotation-author">{authorDisplayName}</span> </Link> {authorHandle && ( <a href={`https://bsky.app/profile/${authorHandle}`} target="_blank" rel="noopener noreferrer" className="annotation-handle" > @{authorHandle} </a> )} </div> <div className="annotation-time">{formatDate(createdAt)}</div> </div> </> );}