Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
1.1 kB · 43 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344import { Row, Col } from "./layout";import { TYPOGRAPHY } from "./constants";import { Star, GitPullRequest, CircleDot, type LucideIcon,} from "../../icons/lucide";
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="stars" Icon={Star} /> <MetricItem value={pulls} label="pulls" Icon={GitPullRequest} /> <MetricItem value={issues} label="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> );}