60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import { MinusSmallIcon } from '@heroicons/react/20/solid'
|
||
import { DownTriangle, UpTriangle } from './DirectionTriangles'
|
||
import FormatNumericValue from './FormatNumericValue'
|
||
|
||
const Change = ({
|
||
change,
|
||
decimals,
|
||
prefix,
|
||
size,
|
||
suffix,
|
||
}: {
|
||
change: number | typeof NaN
|
||
decimals?: number
|
||
prefix?: string
|
||
size?: 'small'
|
||
suffix?: string
|
||
}) => {
|
||
return !isNaN(change) ? (
|
||
<div className="flex items-center space-x-1.5">
|
||
{change > 0 ? (
|
||
<div className="mt-[1px]">
|
||
<UpTriangle size={size} />
|
||
</div>
|
||
) : change < 0 ? (
|
||
<div className="mt-[1px]">
|
||
<DownTriangle size={size} />
|
||
</div>
|
||
) : (
|
||
<MinusSmallIcon
|
||
className={`-mr-1 ${
|
||
size === 'small' ? 'h-4 w-4' : 'h-6 w-6'
|
||
} text-th-fgd-4`}
|
||
/>
|
||
)}
|
||
<p
|
||
className={`font-mono font-normal ${
|
||
size === 'small' ? 'text-xs' : 'text-sm'
|
||
} ${
|
||
change > 0
|
||
? 'text-th-up'
|
||
: change < 0
|
||
? 'text-th-down'
|
||
: 'text-th-fgd-2'
|
||
}`}
|
||
>
|
||
{prefix ? prefix : ''}
|
||
<FormatNumericValue
|
||
value={isNaN(change) ? '0.00' : Math.abs(change)}
|
||
decimals={decimals ? decimals : 2}
|
||
/>
|
||
{suffix ? suffix : ''}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<p>–</p>
|
||
)
|
||
}
|
||
|
||
export default Change
|