matmanna.dev
forked from
tangled.org/core
Monorepo for Tangled
anirudh.fi
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={{ justifyContent: "space-between" }}>
91 <Col style={{ gap: 48 }}>
92 <Col style={{ gap: 32 }}>
93 <Row style={{ justifyContent: "space-between" }}>
94 <CardHeader
95 avatarUrl={data.avatarUrl}
96 ownerHandle={data.ownerHandle}
97 repoName={data.repoName}
98 />
99 <StatusBadge status={data.status} />
100 </Row>
101
102 <span
103 style={{
104 ...TYPOGRAPHY.title,
105 color: "#000000",
106 display: "block",
107 lineClamp: `2 "... #${data.pullRequestNumber}"`,
108 }}>
109 {data.title}
110 </span>
111 </Col>
112
113 <Row style={{ gap: 16 }}>
114 <FilesChangedPill
115 filesChanged={data.filesChanged}
116 additions={data.additions}
117 deletions={data.deletions}
118 />
119 <RoundsPill value={data.rounds} label="rounds" />
120 </Row>
121 </Col>
122
123 <Row
124 style={{
125 alignItems: "flex-end",
126 justifyContent: "space-between",
127 }}>
128 <FooterStats
129 createdAt={data.createdAt}
130 reactionCount={data.reactionCount}
131 commentCount={data.commentCount}
132 />
133 <TangledLogo />
134 </Row>
135 </Card>
136 );
137}