Monorepo for Tangled
tangled.org
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={{
13 justifyContent: "space-between",
14 paddingBottom: 36,
15 }}>
16 <Col style={{ gap: 48 }}>
17 <Col style={{ gap: 32 }}>
18 <Row style={{ justifyContent: "space-between" }}>
19 <CardHeader
20 avatarUrl={data.avatarUrl}
21 ownerHandle={data.ownerHandle}
22 repoName={data.repoName}
23 />
24 <IssueStatusBadge status={data.status} />
25 </Row>
26
27 <div
28 style={{
29 ...TYPOGRAPHY.title,
30 color: "#000000",
31 display: "block",
32 lineClamp: `2 "... #${data.issueNumber}"`,
33 }}>
34 {data.title}
35 </div>
36 </Col>
37
38 <LabelList labels={data.labels} />
39 </Col>
40
41 <Row
42 style={{
43 alignItems: "center",
44 justifyContent: "space-between",
45 }}>
46 <FooterStats
47 createdAt={data.createdAt}
48 authorHandle={data.authorHandle}
49 authorAvatarUrl={data.authorAvatarUrl}
50 reactionCount={data.reactionCount}
51 commentCount={data.commentCount}
52 />
53 <TangledLogo />
54 </Row>
55 </Card>
56 );
57}