A vibe coded tangled fork which supports pijul.
1import { Row, Col } from "./layout";
2import { TYPOGRAPHY } from "./constants";
3import {
4 Star,
5 GitPullRequest,
6 CircleDot,
7 type LucideIcon,
8} from "../../icons/lucide";
9
10interface MetricsProps {
11 stars: number;
12 pulls: number;
13 issues: number;
14}
15
16// Display stars, pulls, issues with Lucide icons
17export function Metrics({ stars, pulls, issues }: MetricsProps) {
18 return (
19 <Row style={{ gap: 56, alignItems: "flex-start" }}>
20 <MetricItem value={stars} label="stars" Icon={Star} />
21 <MetricItem value={pulls} label="pulls" Icon={GitPullRequest} />
22 <MetricItem value={issues} label="issues" Icon={CircleDot} />
23 </Row>
24 );
25}
26
27interface MetricItemProps {
28 value: number;
29 label: string;
30 Icon: LucideIcon;
31}
32
33function MetricItem({ value, label, Icon }: MetricItemProps) {
34 return (
35 <Col style={{ gap: 12 }}>
36 <Row style={{ gap: 12, alignItems: "center" }}>
37 <span style={TYPOGRAPHY.metricValue}>{value}</span>
38 <Icon size={48} />
39 </Row>
40 <span style={{ ...TYPOGRAPHY.label, opacity: 0.75 }}>{label}</span>
41 </Col>
42 );
43}