alice.pds.demo.boltless.dev
This repository has no description
1.2 kB
45 lines
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
16const pluralize = (label: string, n: number) => (`${label}${n === 1 ? "" : "s"}`);
17
18// Display stars, pulls, issues with Lucide icons
19export function Metrics({ stars, pulls, issues }: MetricsProps) {
20 return (
21 <Row style={{ gap: 56, alignItems: "flex-start" }}>
22 <MetricItem value={stars} label={pluralize('star', stars)} Icon={Star} />
23 <MetricItem value={pulls} label={pluralize('pull', pulls)} Icon={GitPullRequest} />
24 <MetricItem value={issues} label={pluralize('issue', issues)} Icon={CircleDot} />
25 </Row>
26 );
27}
28
29interface MetricItemProps {
30 value: number;
31 label: string;
32 Icon: LucideIcon;
33}
34
35function MetricItem({ value, label, Icon }: MetricItemProps) {
36 return (
37 <Col style={{ gap: 12 }}>
38 <Row style={{ gap: 12, alignItems: "center" }}>
39 <span style={TYPOGRAPHY.metricValue}>{value}</span>
40 <Icon size={48} />
41 </Row>
42 <span style={{ ...TYPOGRAPHY.label, opacity: 0.75 }}>{label}</span>
43 </Col>
44 );
45}