Monorepo for Tangled
tangled.org
1import { Card, Row, Col } from "../shared/layout";
2import { Avatar } from "../shared/avatar";
3import { LanguageCircles } from "../shared/language-circles";
4import { Metrics } from "../shared/metrics";
5import { TangledLogo } from "../shared/logo";
6import { FooterStats } from "../shared/footer-stats";
7import { TYPOGRAPHY } from "../shared/constants";
8import type { RepositoryCardData } from "../../validation";
9
10function repoNameFontSize(name: string): number {
11 // Available width ~756px
12 // Inter 600 average char width is ~0.58× the font size.
13 const maxSize = TYPOGRAPHY.repoName.fontSize;
14 const fitted = Math.floor(756 / (name.length * 0.58));
15 return Math.min(maxSize, Math.max(fitted, 48));
16}
17
18export function RepositoryCard(data: RepositoryCardData) {
19 const fontSize = repoNameFontSize(data.repoName);
20 return (
21 <Card>
22 <div
23 style={{
24 display: "flex",
25 position: "absolute",
26 right: -380,
27 top: -380,
28 }}>
29 <LanguageCircles width={760} languages={data.languages} />
30 </div>
31
32 <Col style={{ gap: 64 }}>
33 <Col style={{ gap: 24, maxWidth: 756 }}>
34 <div style={{ ...TYPOGRAPHY.repoName, fontSize, color: "#000000" }}>
35 {data.repoName}
36 </div>
37
38 <Row style={{ gap: 16 }}>
39 <Avatar src={data.avatarUrl} size={64} />
40 <span style={{ ...TYPOGRAPHY.ownerHandle, color: "#000000" }}>
41 {data.ownerHandle}
42 </span>
43 </Row>
44 </Col>
45
46 <Metrics stars={data.stars} pulls={data.pulls} issues={data.issues} />
47 </Col>
48
49 <Row
50 style={{
51 alignItems: "center",
52 justifyContent: "space-between",
53 flexGrow: 1,
54 }}>
55 <FooterStats createdAt={data.createdAt} />
56
57 <TangledLogo />
58 </Row>
59 </Card>
60 );
61}