alice.pds.demo.boltless.dev
This repository has no description
2.2 kB
70 lines
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
7// Handles longer than this cause the footer to overflow when combined with
8// other stats, so we drop the less-important reaction count first, then the
9// comment count once the handle grows longer still.
10const LONG_HANDLE_THRESHOLD = 20;
11const VERY_LONG_HANDLE_THRESHOLD = 28;
12
13interface FooterStatsProps {
14 createdAt: string;
15 authorHandle?: string;
16 authorAvatarUrl?: string;
17 reactionCount?: number;
18 commentCount?: number;
19}
20
21export function FooterStats({
22 createdAt,
23 authorHandle,
24 authorAvatarUrl,
25 reactionCount,
26 commentCount,
27}: FooterStatsProps) {
28 const formattedDate = new Intl.DateTimeFormat("en-GB", {
29 day: "numeric",
30 month: "short",
31 year: "numeric",
32 }).format(new Date(createdAt));
33
34 const handleLength = authorHandle?.length ?? 0;
35 // Long handles crowd the footer. Drop reactions first; drop comments too
36 // for extremely long handles to prevent overflow past the tangled logo.
37 const isLongHandle = handleLength > LONG_HANDLE_THRESHOLD;
38 const isVeryLongHandle = handleLength > VERY_LONG_HANDLE_THRESHOLD;
39 const gap = isLongHandle ? 40 : 64;
40 const hideReactions = isLongHandle;
41 const hideComments = isVeryLongHandle;
42
43 return (
44 <Row style={{ gap }}>
45 {authorHandle && authorAvatarUrl ? (
46 <Row style={{ gap: 16, alignItems: "center" }}>
47 <Avatar src={authorAvatarUrl} size={40} />
48 <span
49 style={{
50 ...TYPOGRAPHY.body,
51 color: "#404040",
52 maxWidth: 480,
53 overflow: "hidden",
54 textOverflow: "ellipsis",
55 whiteSpace: "nowrap",
56 }}>
57 {authorHandle}
58 </span>
59 </Row>
60 ) : null}
61 <StatItem Icon={Calendar} value={formattedDate} />
62 {reactionCount && !hideReactions ? (
63 <StatItem Icon={SmilePlus} value={reactionCount} />
64 ) : null}
65 {commentCount && !hideComments ? (
66 <StatItem Icon={MessageSquare} value={commentCount} />
67 ) : null}
68 </Row>
69 );
70}