Monorepo for Tangled
tangled.org
1import { Card, Row, Col } from "../shared/layout";
2import { TangledLogo } from "../shared/logo";
3import { StatusBadge } from "../shared/status-badge";
4import { CardHeader } from "../shared/card-header";
5import { FooterStats } from "../shared/footer-stats";
6import { FileDiff, RefreshCw } from "../../icons/lucide";
7import { COLORS, TYPOGRAPHY } from "../shared/constants";
8import type { PullRequestCardData } from "../../validation";
9
10interface FilesChangedPillProps {
11 filesChanged: number;
12 additions: number;
13 deletions: number;
14}
15
16function FilesChangedPill({
17 filesChanged,
18 additions,
19 deletions,
20}: FilesChangedPillProps) {
21 return (
22 <Row
23 style={{
24 overflow: "hidden",
25 borderRadius: 18,
26 backgroundColor: "#fff",
27 border: `4px solid ${COLORS.label.border}`,
28 }}>
29 <Row
30 style={{
31 gap: 16,
32 padding: "16px 28px",
33 }}>
34 <FileDiff size={34} color="#202020" />
35 <span style={{ ...TYPOGRAPHY.body, color: "#202020" }}>
36 {filesChanged} files
37 </span>
38 </Row>
39 <Row style={{ gap: 0 }}>
40 <Row
41 style={{
42 padding: "16px 10px 16px 11px",
43 backgroundColor: COLORS.diff.additions.bg,
44 }}>
45 <span
46 style={{ ...TYPOGRAPHY.body, color: COLORS.diff.additions.text }}>
47 +{additions}
48 </span>
49 </Row>
50 <Row
51 style={{
52 padding: "16px 16px 16px 11px",
53 backgroundColor: COLORS.diff.deletions.bg,
54 }}>
55 <span
56 style={{ ...TYPOGRAPHY.body, color: COLORS.diff.deletions.text }}>
57 -{deletions}
58 </span>
59 </Row>
60 </Row>
61 </Row>
62 );
63}
64
65interface MetricPillProps {
66 value: number;
67 label: string;
68}
69
70function RoundsPill({ value, label }: MetricPillProps) {
71 return (
72 <Row
73 style={{
74 gap: 16,
75 padding: "16px 28px",
76 borderRadius: 18,
77 backgroundColor: "#fff",
78 border: `4px solid ${COLORS.label.border}`,
79 }}>
80 <RefreshCw size={36} color="#202020" />
81 <span style={{ ...TYPOGRAPHY.body, color: "#202020" }}>
82 {value} {label}
83 </span>
84 </Row>
85 );
86}
87
88export function PullRequestCard(data: PullRequestCardData) {
89 return (
90 <Card style={{
91 justifyContent: "space-between",
92 paddingBottom: 36,
93 }}>
94 <Col style={{ gap: 48 }}>
95 <Col style={{ gap: 32 }}>
96 <Row style={{ justifyContent: "space-between" }}>
97 <CardHeader
98 avatarUrl={data.avatarUrl}
99 ownerHandle={data.ownerHandle}
100 repoName={data.repoName}
101 />
102 <StatusBadge status={data.status} />
103 </Row>
104
105 <span
106 style={{
107 ...TYPOGRAPHY.title,
108 color: "#000000",
109 display: "block",
110 lineClamp: `2 "... #${data.pullRequestNumber}"`,
111 }}>
112 {data.title}
113 </span>
114 </Col>
115
116 <Row style={{ gap: 16 }}>
117 <FilesChangedPill
118 filesChanged={data.filesChanged}
119 additions={data.additions}
120 deletions={data.deletions}
121 />
122 <RoundsPill value={data.rounds} label={data.rounds <= 1 ? `round` : `rounds`} />
123 </Row>
124 </Col>
125
126 <Row
127 style={{
128 alignItems: "center",
129 justifyContent: "space-between",
130 }}>
131 <FooterStats
132 createdAt={data.createdAt}
133 authorHandle={data.authorHandle}
134 authorAvatarUrl={data.authorAvatarUrl}
135 reactionCount={data.reactionCount}
136 commentCount={data.commentCount}
137 />
138 <TangledLogo />
139 </Row>
140 </Card>
141 );
142}