blob: d7d885c01d0583280b90dbfce7ae38d38da87f1b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
import type { TwitterNotification } from "../lib/fetching/types";
import { timeAgo } from "../lib/utils/time";
interface ChatCardProps {
notification: TwitterNotification;
accent: string;
}
export function ChatCard({ notification, accent }: ChatCardProps) {
const firstUser = Object.values(notification.users)[0];
const timestamp = timeAgo(Number(notification.timestampMs));
return (
<article className="chat-card" style={{ borderColor: accent }}>
<div className="chat-avatar">
{firstUser?.profile_image_url_https ? (
<img src={firstUser.profile_image_url_https} alt={firstUser.name} loading="lazy" />
) : (
<span>{firstUser?.name?.[0] ?? "?"}</span>
)}
</div>
<div className="chat-body">
<header>
<strong>{firstUser?.name ?? "Notification"}</strong>
{firstUser?.screen_name && <span className="muted">@{firstUser.screen_name}</span>}
<span className="muted dot" aria-hidden="true">
•
</span>
<span className="muted">{timestamp}</span>
</header>
<p>{highlight(notification.message.text)}</p>
</div>
</article>
);
}
function highlight(text: string) {
const parts = text.split(/([@#][A-Za-z0-9_]+)/g);
return parts.map((part, index) => {
if (part.startsWith("@")) {
return (
<span key={index} className="mention">
{part}
</span>
);
}
if (part.startsWith("#")) {
return (
<span key={index} className="hashtag">
{part}
</span>
);
}
return <span key={index}>{part}</span>;
});
}
|
