A vibe coded tangled fork which supports pijul.
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 ~1000px (1104px card content minus language circles area).
12 // Inter 600 average char width is ~0.58× the font size.
13 const maxSize = TYPOGRAPHY.repoName.fontSize;
14 const fitted = Math.floor(1000 / (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 <LanguageCircles languages={data.languages} />
23
24 <Col style={{ gap: 64 }}>
25 <Col style={{ gap: 24 }}>
26 <span style={{ ...TYPOGRAPHY.repoName, fontSize, color: "#000000" }}>
27 {data.repoName}
28 </span>
29
30 <Row style={{ gap: 16 }}>
31 <Avatar src={data.avatarUrl} size={64} />
32 <span style={{ ...TYPOGRAPHY.ownerHandle, color: "#000000" }}>
33 {data.ownerHandle}
34 </span>
35 </Row>
36 </Col>
37
38 <Metrics stars={data.stars} pulls={data.pulls} issues={data.issues} />
39 </Col>
40
41 <Row
42 style={{
43 alignItems: "flex-end",
44 justifyContent: "space-between",
45 flexGrow: 1,
46 }}>
47 <FooterStats createdAt={data.createdAt} />
48
49 <TangledLogo />
50 </Row>
51 </Card>
52 );
53}