init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import { Tooltip } from "@humansignal/ui";
import { IconInfoOutline } from "@humansignal/icons";
 
type CardProps = {
  title: string;
  value: number | string;
  info: string;
};
 
const Card = ({ title, value, info }: CardProps) => {
  return (
    <div className="flex-1 border border-neutral-border rounded-small p-base bg-neutral-surface-subtle">
      <div className="flex flex-row gap-tighter items-center text-xs font-semibold text-neutral-content-subtle uppercase tracking-wide mb-2">
        {title}
        {info && (
          <Tooltip title={info}>
            <IconInfoOutline size={12} style={{ width: 16, height: 16 }} className="text-neutral-content-subtler" />
          </Tooltip>
        )}
      </div>
      <div className="text-headline-large font-bold text-neutral-content">{value}</div>
    </div>
  );
};
 
type Props = {
  values: CardProps[];
};
 
export const NumbersSummary = ({ values }: Props) => {
  return (
    <div className="flex flex-row gap-base">
      {values.map((value) => (
        <Card key={value.title} {...value} />
      ))}
    </div>
  );
};