37 lines
1013 B
TypeScript
37 lines
1013 B
TypeScript
import { Tooltip } from '@vegaprotocol/ui-toolkit';
|
|
import type { StatFields } from '../../config/types';
|
|
import { defaultFieldFormatter } from '../table-row';
|
|
import { Card, Indicator, TailwindIntents } from '@vegaprotocol/ui-toolkit';
|
|
import { useMemo } from 'react';
|
|
|
|
export const PromotedStatsItem = ({
|
|
title,
|
|
formatter,
|
|
goodThreshold,
|
|
value,
|
|
description,
|
|
}: StatFields) => {
|
|
const variant = useMemo(
|
|
() =>
|
|
goodThreshold
|
|
? goodThreshold(value)
|
|
? TailwindIntents.Success
|
|
: TailwindIntents.Danger
|
|
: TailwindIntents.Highlight,
|
|
[goodThreshold, value]
|
|
);
|
|
return (
|
|
<Tooltip description={description} align="start">
|
|
<Card>
|
|
<div className="uppercase text-[0.9375rem]">
|
|
<Indicator variant={variant} />
|
|
<span>{title}</span>
|
|
</div>
|
|
<div className="mt-4 text-h4 leading-none">
|
|
{formatter ? formatter(value) : defaultFieldFormatter(value)}
|
|
</div>
|
|
</Card>
|
|
</Tooltip>
|
|
);
|
|
};
|