A vibe coded tangled fork which supports pijul.
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
11const STATUS_CONFIG = {
12 open: {
13 Icon: CircleDot,
14 bg: COLORS.status.open.bg,
15 text: COLORS.status.open.text,
16 },
17 closed: {
18 Icon: Ban,
19 bg: COLORS.status.closed.bg,
20 text: COLORS.status.closed.text,
21 },
22 merged: {
23 Icon: GitMerge,
24 bg: COLORS.status.merged.bg,
25 text: COLORS.status.merged.text,
26 },
27} as const;
28
29interface StatusBadgeProps {
30 status: "open" | "closed" | "merged";
31}
32
33export function StatusBadge({ status }: StatusBadgeProps) {
34 const config =
35 status === "merged"
36 ? STATUS_CONFIG.merged
37 : status === "closed"
38 ? STATUS_CONFIG.closed
39 : STATUS_CONFIG.open;
40 const Icon = config.Icon;
41
42 return (
43 <Row
44 style={{
45 gap: 12,
46 padding: "14px 26px 14px 24px",
47 borderRadius: 18,
48 backgroundColor: config.bg,
49 }}>
50 <Icon size={48} color={config.text} />
51 <span style={{ ...TYPOGRAPHY.status, color: config.text }}>{status}</span>
52 </Row>
53 );
54}
55
56export function IssueStatusBadge({ status }: { status: "open" | "closed" }) {
57 const config =
58 status === "closed" ? STATUS_CONFIG.closed : STATUS_CONFIG.open;
59 const Icon = config.Icon;
60
61 return (
62 <Row
63 style={{
64 gap: 12,
65 padding: "14px 26px 14px 24px",
66 borderRadius: 18,
67 backgroundColor: config.bg,
68 }}>
69 <Icon size={48} color={config.text} />
70 <span style={{ ...TYPOGRAPHY.status, color: config.text }}>{status}</span>
71 </Row>
72 );
73}