alice.pds.demo.boltless.dev
This repository has no description
1.6 kB
54 lines
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 authorHandle={data.authorHandle}
46 authorAvatarUrl={data.authorAvatarUrl}
47 reactionCount={data.reactionCount}
48 commentCount={data.commentCount}
49 />
50 <TangledLogo />
51 </Row>
52 </Card>
53 );
54}