53 lines
1.1 KiB
TypeScript
53 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import Tooltip from "@/components/tooltip";
|
|
import { formatNumberWithCommas } from "@ssr/common/utils/number-utils";
|
|
import { PlayerStatValue } from "@ssr/common/player/player-stat";
|
|
|
|
interface DailyChangeProps {
|
|
/**
|
|
* The type of change
|
|
*/
|
|
type: PlayerStatValue;
|
|
|
|
/**
|
|
* The value of the change
|
|
*/
|
|
change: number | undefined;
|
|
|
|
/**
|
|
* The tooltip to display
|
|
*/
|
|
tooltip?: React.ReactElement | string;
|
|
|
|
/**
|
|
* The formater for the change
|
|
*
|
|
* @param value
|
|
*/
|
|
format?: (value: number) => string;
|
|
}
|
|
|
|
export function DailyChange({ type, change, tooltip, format }: DailyChangeProps) {
|
|
const formatValue = format ?? formatNumberWithCommas;
|
|
if (change === 0 || change === undefined) {
|
|
return null;
|
|
}
|
|
|
|
const value = (
|
|
<p className={`text-sm ${change > 0 ? "text-green-400" : "text-red-400"}`}>
|
|
{change > 0 ? "+" : ""}
|
|
{formatValue(change)}
|
|
</p>
|
|
);
|
|
|
|
if (!tooltip) {
|
|
tooltip = `${type.displayName} change compared to yesterday`;
|
|
}
|
|
|
|
return (
|
|
<Tooltip display={tooltip} side="bottom">
|
|
{value}
|
|
</Tooltip>
|
|
);
|
|
}
|