21 lines
511 B
TypeScript
21 lines
511 B
TypeScript
interface PercentPillProps {
|
|
value: number
|
|
className?: string
|
|
bg?: string
|
|
}
|
|
|
|
const PercentPill = (props: PercentPillProps) => {
|
|
const bg = props.bg || (props.value > 0 ? 'bg-green-500' : 'bg-mango-red')
|
|
const displayValue = props.value.toFixed(props.value > 10 ? 0 : 1)
|
|
|
|
return (
|
|
<div
|
|
className={`${props.className} ${bg} inline-flex text-xs h-5 mt-1 items-center px-2 py-1 uppercase font-bold rounded-full`}
|
|
>
|
|
<p>{displayValue}%</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PercentPill
|