A vibe coded tangled fork which supports pijul.
1import { Row } from "./layout";
2import { COLORS, TYPOGRAPHY } from "./constants";
3
4interface LabelPillProps {
5 name: string;
6 color: string;
7}
8
9function LabelPill({ name, color }: LabelPillProps) {
10 return (
11 <Row
12 style={{
13 gap: 16,
14 padding: "16px 28px",
15 borderRadius: 18,
16 backgroundColor: "#fff",
17 border: `4px solid ${COLORS.label.border}`,
18 }}>
19 <div
20 style={{
21 width: 24,
22 height: 24,
23 borderRadius: "50%",
24 backgroundColor: color,
25 }}
26 />
27 <span style={{ ...TYPOGRAPHY.body, color: COLORS.label.text }}>
28 {name}
29 </span>
30 </Row>
31 );
32}
33
34interface LabelListProps {
35 labels: Array<{ name: string; color: string }>;
36 max?: number;
37}
38
39export function LabelList({ labels, max = 5 }: LabelListProps) {
40 if (labels.length === 0) return null;
41
42 return (
43 <Row style={{ gap: 12 }}>
44 {labels.slice(0, max).map((label, i) => (
45 <LabelPill key={i} name={label.name} color={label.color} />
46 ))}
47 </Row>
48 );
49}