Network stats

1import type { ComponentProps, ReactNode } from "react";
2 
3import { componentClasses } from "@/lib/utils";
4 
5import { panelStyles, type BitcoinVisualProps } from "./shared";
6 
7export interface NetworkStat {
8  label: string;
9  value: ReactNode;
10  detail?: ReactNode;
11}
12 
13export type NetworkStatsProps = Omit<ComponentProps<"dl">, "children"> &
14  BitcoinVisualProps & {
15    stats: NetworkStat[];
16  };
17 
18export function NetworkStats({
19  stats,
20  unstyled,
21  className,
22  ...props
23}: NetworkStatsProps) {
24  return (
25    <dl
26      data-slot="network-stats"
27      data-unstyled={unstyled || undefined}
28      className={componentClasses(
29        unstyled,
30        [
31          panelStyles,
32          "grid divide-y divide-[var(--color-rule-subtle)] overflow-hidden sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-4",
33        ],
34        className,
35      )}
36      {...props}
37    >
38      {stats.map((stat) => (
39        <div
40          key={stat.label}
41          data-slot="network-stat"
42          className={componentClasses(unstyled, "min-w-0 p-5")}
43        >
44          <dt
45            className={componentClasses(
46              unstyled,
47              "text-xs text-[var(--color-muted)]",
48            )}
49          >
50            {stat.label}
51          </dt>
52          <dd
53            className={componentClasses(
54              unstyled,
55              "mt-2 min-w-0 overflow-hidden text-ellipsis font-mono text-lg font-medium tabular-nums tracking-[-0.025em]",
56            )}
57          >
58            {stat.value}
59          </dd>
60          {stat.detail ? (
61            <dd
62              className={componentClasses(
63                unstyled,
64                "mt-1 text-xs text-[var(--color-muted)]",
65              )}
66            >
67              {stat.detail}
68            </dd>
69          ) : null}
70        </div>
71      ))}
72    </dl>
73  );
74}