vega-frontend-monorepo/libs/network-stats/src/components/promoted-stats-item/promoted-stats-item.tsx

import { Tooltip } from '@vegaprotocol/ui-toolkit';
import type { StatFields } from '../../config/types';
import { defaultFieldFormatter } from '../table-row';
import { GoodThresholdIndicator } from '../good-threshold-indicator';

export const PromotedStatsItem = ({
  title,
  formatter,
  goodThreshold,
  value,
  description,
}: StatFields) => {
  return (
    <Tooltip description={description} align="start">
      <div className="px-24 py-16 pr-64 border items-center">
        <div className="uppercase text-[0.9375rem]">
          <GoodThresholdIndicator goodThreshold={goodThreshold} value={value} />
          <span>{title}</span>
        </div>
        <div className="mt-4 text-h4 leading-none">
          {formatter ? formatter(value) : defaultFieldFormatter(value)}
        </div>
      </div>
    </Tooltip>
  );
};