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