Stats List

1import { cn } from "@/lib/utils"
2 
3export interface StatsListEntry {
4  label: string
5  /** Pre-formatted for display, e.g. "62%", "14", "Yamal (3)". */
6  home: string
7  away: string
8  /** Raw numeric values for the two sides: every row is a comparison bar, sized from these. */
9  homeValue: number
10  awayValue: number
11}
12 
13export interface StatsListProps {
14  /** Rows in display order. Sport-specific: see the adapter for which stats each sport contributes. */
15  entries: StatsListEntry[]
16  /**
17   * Omits the comparison bar under every row, keeping just the numbers
18   * and label, for entries where the two sides aren't a meaningful
19   * proportional split, e.g. two different players' individual totals.
20   *
21   * @defaultValue true
22   */
23  showBars?: boolean
24  className?: string
25}
26 
27function StatsListRow({ entry, showBar }: { entry: StatsListEntry; showBar: boolean }) {
28  const total = entry.homeValue + entry.awayValue
29  const homeShare = total > 0 ? (entry.homeValue / total) * 100 : 0
30  const awayShare = total > 0 ? (entry.awayValue / total) * 100 : 0
31  const homeLeading = entry.homeValue > entry.awayValue
32  const awayLeading = entry.awayValue > entry.homeValue
33 
34  return (
35    <li className="flex flex-col gap-1.5 py-2.5">
36      <div className="flex items-center justify-between gap-3 text-sm">
37        <span className={cn("tabular-nums", homeLeading ? "font-semibold" : "text-muted-foreground")}>
38          {entry.home}
39        </span>
40        <span className="text-xs text-muted-foreground">{entry.label}</span>
41        <span className={cn("tabular-nums", awayLeading ? "font-semibold" : "text-muted-foreground")}>
42          {entry.away}
43        </span>
44      </div>
45      {showBar ? (
46        <div className="flex items-center gap-1">
47          <div className="flex flex-1 justify-end">
48            <div
49              className={cn(
50                "h-1 rounded-full transition-[width] duration-300",
51                total === 0 ? "invisible" : homeLeading ? "bg-foreground" : "bg-muted-foreground/25"
52              )}
53              style={{ width: `${homeShare}%` }}
54            />
55          </div>
56          <div className="flex flex-1 justify-start">
57            <div
58              className={cn(
59                "h-1 rounded-full transition-[width] duration-300",
60                total === 0 ? "invisible" : awayLeading ? "bg-foreground" : "bg-muted-foreground/25"
61              )}
62              style={{ width: `${awayShare}%` }}
63            />
64          </div>
65        </div>
66// … truncated