27 lines
739 B
JavaScript
27 lines
739 B
JavaScript
import React from "react";
|
||
import InfoTooltip from "./ui/infoTooltip.js";
|
||
|
||
/**
|
||
* Compact badge that shows a 0-100 “readiness” score.
|
||
*
|
||
* Props:
|
||
* • score (Number 0-100) – required
|
||
*/
|
||
export default function ReadinessPill({ score = 0 }) {
|
||
const pct = Math.max(0, Math.min(100, Math.round(score)));
|
||
|
||
const bg =
|
||
pct >= 80 ? "bg-green-600"
|
||
: pct >= 60 ? "bg-yellow-500"
|
||
: "bg-red-600";
|
||
|
||
return (
|
||
<span
|
||
className={`ml-2 inline-flex items-center gap-1 rounded-full px-2 py-px text-xs font-semibold text-white ${bg}`}
|
||
>
|
||
{pct}
|
||
<InfoTooltip message="How long your portfolio can fund your desired spending, mapped onto a 30-year scale (100 ≈ ≥30 yrs)" />
|
||
</span>
|
||
);
|
||
}
|