Skip to content
Source
Sign inSign up
Open History to see the last commit

DiffStatLabel.tsx

48 lines1.6 KB

1import { memo } from "react";
2import { cn } from "~/lib/utils";
3​
4export function hasNonZeroStat(stat: { additions: number; deletions: number }): boolean {
5 return stat.additions > 0 || stat.deletions > 0;
6}
7​
8export function formatCompactDiffCount(value: number): string {
9 if (value < 1000) return String(value);
10 if (value < 999_500) {
11 const k = value / 1000;
12 return `${k < 10 ? k.toFixed(1).replace(/\.0$/, "") : Math.round(k)}k`;
13 }
14 if (value < 999_500_000) {
15 const m = value / 1_000_000;
16 return `${m < 10 ? m.toFixed(1).replace(/\.0$/, "") : Math.round(m)}m`;
17 }
18 const b = value / 1_000_000_000;
19 return `${b < 10 ? b.toFixed(1).replace(/\.0$/, "") : Math.round(b)}b`;
21​
22export const DiffStatLabel = memo(function DiffStatLabel(props: {
23 additions: number;
24 deletions: number;
25 className?: string;
26 layout?: "aligned" | "inline";
27}) {
28 const { additions, deletions, className, layout = "aligned" } = props;
29 return (
30 <span
31 role="group"
32 aria-label={`${additions} additions, ${deletions} deletions`}
33 className={cn(
34 layout === "inline"
35 ? "inline-flex items-center gap-1 tabular-nums align-middle"
36 : "inline-grid grid-cols-[4ch_4ch] gap-2 text-right tabular-nums align-middle",
37 className,
38 )}
39 >
40 <span aria-hidden="true" className="font-mono text-diff-addition-foreground">
41 +{formatCompactDiffCount(additions)}
42 </span>
43 <span aria-hidden="true" className="font-mono text-diff-deletion-foreground">
44 -{formatCompactDiffCount(deletions)}
45 </span>
46 </span>
47 );
48});