A vibe coded tangled fork which supports pijul.
1import { Card, Row, Col } from "../shared/layout";
2import { TangledLogo } from "../shared/logo";
3import { IssueStatusBadge } from "../shared/status-badge";
4import { CardHeader } from "../shared/card-header";
5import { LabelList } from "../shared/label-pill";
6import { FooterStats } from "../shared/footer-stats";
7import { TYPOGRAPHY } from "../shared/constants";
8import type { IssueCardData } from "../../validation";
9
10export function IssueCard(data: IssueCardData) {
11 return (
12 <Card style={{ justifyContent: "space-between" }}>
13 <Col style={{ gap: 48 }}>
14 <Col style={{ gap: 32 }}>
15 <Row style={{ justifyContent: "space-between" }}>
16 <CardHeader
17 avatarUrl={data.avatarUrl}
18 ownerHandle={data.ownerHandle}
19 repoName={data.repoName}
20 />
21 <IssueStatusBadge status={data.status} />
22 </Row>
23
24 <div
25 style={{
26 ...TYPOGRAPHY.title,
27 color: "#000000",
28 display: "block",
29 lineClamp: `2 "... #${data.issueNumber}"`,
30 }}>
31 {data.title}
32 </div>
33 </Col>
34
35 <LabelList labels={data.labels} />
36 </Col>
37
38 <Row
39 style={{
40 alignItems: "flex-end",
41 justifyContent: "space-between",
42 }}>
43 <FooterStats
44 createdAt={data.createdAt}
45 reactionCount={data.reactionCount}
46 commentCount={data.commentCount}
47 />
48 <TangledLogo />
49 </Row>
50 </Card>
51 );
52}