Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
1.9 kB · 58 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859import { Row } from "./layout";import { Calendar, MessageSquare, SmilePlus } from "../../icons/lucide";import { StatItem } from "./stat-item";import { Avatar } from "./avatar";import { TYPOGRAPHY } from "./constants";
interface FooterStatsProps { createdAt: string; authorHandle?: string; authorAvatarUrl?: string; reactionCount?: number; commentCount?: number;}
export function FooterStats({ createdAt, authorHandle, authorAvatarUrl, reactionCount, commentCount,}: FooterStatsProps) { const formattedDate = new Intl.DateTimeFormat("en-GB", { day: "numeric", month: "short", year: "numeric", }).format(new Date(createdAt));
const handleLength = authorHandle?.length ?? 0; const showReactions = handleLength <= 16; const showComments = handleLength <= 11;
return ( <Row style={{ gap: 40 }}> {authorHandle && authorAvatarUrl ? ( <Row style={{ gap: 16, alignItems: "center" }}> <Avatar src={authorAvatarUrl} size={40} /> <span style={{ ...TYPOGRAPHY.body, color: "#404040", maxWidth: 400, lineClamp: 1, display: "block", }}> {authorHandle} </span> </Row> ) : null} <StatItem Icon={Calendar} value={formattedDate} /> {showReactions && reactionCount ? ( <StatItem Icon={SmilePlus} value={reactionCount} /> ) : null} {showComments && commentCount ? ( <StatItem Icon={MessageSquare} value={commentCount} /> ) : null} </Row> );}