Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
1.2 kB · 44 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445import { Row, Col } from "./layout";import { TYPOGRAPHY } from "./constants";import { Star, GitPullRequest, CircleDot, type LucideIcon,} from "../../icons/lucide";import { pluralize } from "../../lib/pluralize";
interface MetricsProps { stars: number; pulls: number; issues: number;}
// Display stars, pulls, issues with Lucide iconsexport function Metrics({ stars, pulls, issues }: MetricsProps) { return ( <Row style={{ gap: 56, alignItems: "flex-start" }}> <MetricItem value={stars} label={pluralize('star', stars)} Icon={Star} /> <MetricItem value={pulls} label={pluralize('pull', pulls)} Icon={GitPullRequest} /> <MetricItem value={issues} label={pluralize('issue', issues)} Icon={CircleDot} /> </Row> );}
interface MetricItemProps { value: number; label: string; Icon: LucideIcon;}
function MetricItem({ value, label, Icon }: MetricItemProps) { return ( <Col style={{ gap: 12 }}> <Row style={{ gap: 12, alignItems: "center" }}> <span style={TYPOGRAPHY.metricValue}>{value}</span> <Icon size={48} /> </Row> <span style={{ ...TYPOGRAPHY.label, opacity: 0.75 }}>{label}</span> </Col> );}