Function DataTile

packages/shared/src/components/DataTile.tsx:22–59

({
  label,
  value,
  info,
  icon,
  subtitle,
  valueClassName,
  className,
})

}

export const DataTile: React.FC<DataTileProps> = ({
  label,
  value,
  info,
  icon,
  subtitle,
  valueClassName,
  className,
}) => {
  return (
    <div
      className={classNames(
        'flex flex-col gap-1 rounded-14 border border-border-subtlest-tertiary p-4',
        className?.container,
      )}
    >
      <span className="flex flex-row items-center gap-1">
        <Typography type={TypographyType.Footnote}>{label}</Typography>
        <Tooltip content={info} enableMobileClick>
          <span className="text-text-disabled">
            <InfoIcon size={IconSize.Size16} />
          </span>
        </Tooltip>
      </span>
      <span className="flex min-w-0 flex-row items-center gap-1">
        {icon}
        <Typography
          type={TypographyType.Title2}
          bold
          className={classNames('min-w-0', valueClassName)}
        >
          {typeof value === 'number' ? formatDataTileValue(value) : value}
        </Typography>
      </span>
      {subtitle}
    </div>
  );
};