Monorepo for Tangled
tangled.org
1import { Row } from "./layout";
2import { Calendar, MessageSquare, SmilePlus } from "../../icons/lucide";
3import { StatItem } from "./stat-item";
4import { Avatar } from "./avatar";
5import { TYPOGRAPHY } from "./constants";
6
7interface FooterStatsProps {
8 createdAt: string;
9 authorHandle?: string;
10 authorAvatarUrl?: string;
11 reactionCount?: number;
12 commentCount?: number;
13}
14
15export function FooterStats({
16 createdAt,
17 authorHandle,
18 authorAvatarUrl,
19 reactionCount,
20 commentCount,
21}: FooterStatsProps) {
22 const formattedDate = new Intl.DateTimeFormat("en-GB", {
23 day: "numeric",
24 month: "short",
25 year: "numeric",
26 }).format(new Date(createdAt));
27
28 const handleLength = authorHandle?.length ?? 0;
29 const showReactions = handleLength <= 16;
30 const showComments = handleLength <= 11;
31
32 return (
33 <Row style={{ gap: 40 }}>
34 {authorHandle && authorAvatarUrl ? (
35 <Row style={{ gap: 16, alignItems: "center" }}>
36 <Avatar src={authorAvatarUrl} size={40} />
37 <span
38 style={{
39 ...TYPOGRAPHY.body,
40 color: "#404040",
41 maxWidth: 400,
42 lineClamp: 1,
43 display: "block",
44 }}>
45 {authorHandle}
46 </span>
47 </Row>
48 ) : null}
49 <StatItem Icon={Calendar} value={formattedDate} />
50 {showReactions && reactionCount ? (
51 <StatItem Icon={SmilePlus} value={reactionCount} />
52 ) : null}
53 {showComments && commentCount ? (
54 <StatItem Icon={MessageSquare} value={commentCount} />
55 ) : null}
56 </Row>
57 );
58}