Monorepo for Tangled
tangled.org
1import { Row } from "./layout";
2import { Avatar } from "./avatar";
3import { TYPOGRAPHY } from "./constants";
4
5interface CardHeaderProps {
6 avatarUrl: string;
7 ownerHandle: string;
8 repoName: string;
9}
10
11export function CardHeader({
12 avatarUrl,
13 ownerHandle,
14 repoName,
15}: CardHeaderProps) {
16 const text = `${ownerHandle} / ${repoName}`;
17 const BASE_SIZE = TYPOGRAPHY.cardHeader.fontSize;
18 const MAX_CHARS = 28;
19 const fontSize =
20 text.length > MAX_CHARS
21 ? Math.max(28, Math.floor((BASE_SIZE * MAX_CHARS) / text.length))
22 : BASE_SIZE;
23
24 return (
25 <Row style={{ gap: 16 }}>
26 <Avatar src={avatarUrl} size={64} />
27 <span style={{ ...TYPOGRAPHY.cardHeader, fontSize, color: "#000000" }}>
28 {ownerHandle} / {repoName}
29 </span>
30 </Row>
31 );
32}