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