37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
/**
|
|
* Reusable component for displaying actual / projected points in a stacked format.
|
|
* Used in standings tables and anywhere else points need to be shown with projections.
|
|
*/
|
|
interface PointsDisplayProps {
|
|
actualPoints: number | null | undefined;
|
|
projectedPoints: number | null | undefined;
|
|
totalPoints: number;
|
|
participantsRemaining?: number;
|
|
}
|
|
|
|
export function PointsDisplay({
|
|
actualPoints,
|
|
projectedPoints,
|
|
totalPoints,
|
|
participantsRemaining,
|
|
}: PointsDisplayProps) {
|
|
const displayed = actualPoints !== null && actualPoints !== undefined ? actualPoints : totalPoints;
|
|
const hasProjection =
|
|
projectedPoints !== null &&
|
|
projectedPoints !== undefined &&
|
|
participantsRemaining !== undefined &&
|
|
participantsRemaining > 0;
|
|
|
|
if (!hasProjection) {
|
|
return <span className="font-semibold">{displayed.toFixed(2)}</span>;
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col items-end">
|
|
<span className="font-semibold">{displayed.toFixed(2)}</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{projectedPoints?.toFixed(2)} proj
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|