tangled.org
Monorepo for Tangled
tangled.org
1.8 kB
77 lines
1import { Row } from "./layout";
2import {
3 CircleDot,
4 Ban,
5 GitPullRequest,
6 GitPullRequestClosed,
7 GitMerge,
8} from "../../icons/lucide";
9import { COLORS, TYPOGRAPHY } from "./constants";
10
11function capitalize(text: string) {
12 return text.charAt(0).toUpperCase() + text.slice(1);
13}
14
15const STATUS_CONFIG = {
16 open: {
17 Icon: CircleDot,
18 bg: COLORS.status.open.bg,
19 text: COLORS.status.open.text,
20 },
21 closed: {
22 Icon: Ban,
23 bg: COLORS.status.closed.bg,
24 text: COLORS.status.closed.text,
25 },
26 merged: {
27 Icon: GitMerge,
28 bg: COLORS.status.merged.bg,
29 text: COLORS.status.merged.text,
30 },
31} as const;
32
33interface StatusBadgeProps {
34 status: "open" | "closed" | "merged";
35}
36
37export function StatusBadge({ status }: StatusBadgeProps) {
38 const config =
39 status === "merged"
40 ? STATUS_CONFIG.merged
41 : status === "closed"
42 ? STATUS_CONFIG.closed
43 : STATUS_CONFIG.open;
44 const Icon = config.Icon;
45
46 return (
47 <Row
48 style={{
49 gap: 12,
50 padding: "14px 26px 14px 24px",
51 borderRadius: 18,
52 backgroundColor: config.bg,
53 }}>
54 <Icon size={48} color={config.text} />
55 <span style={{ ...TYPOGRAPHY.status, color: config.text }}>{capitalize(status)}</span>
56 </Row>
57 );
58}
59
60export function IssueStatusBadge({ status }: { status: "open" | "closed" }) {
61 const config =
62 status === "closed" ? STATUS_CONFIG.closed : STATUS_CONFIG.open;
63 const Icon = config.Icon;
64
65 return (
66 <Row
67 style={{
68 gap: 12,
69 padding: "14px 26px 14px 24px",
70 borderRadius: 18,
71 backgroundColor: config.bg,
72 }}>
73 <Icon size={48} color={config.text} />
74 <span style={{ ...TYPOGRAPHY.status, color: config.text }}>{capitalize(status)}</span>
75 </Row>
76 );
77}