32 lines
761 B
React
32 lines
761 B
React
|
/**
|
||
|
|
* UsageBadge - Small inline usage indicator
|
||
|
|
*
|
||
|
|
* Shows usage quota in format: (used/limit)
|
||
|
|
* Color-coded: green (ok), yellow (warning), red (exceeded)
|
||
|
|
*
|
||
|
|
* Phase 3: Frontend Display
|
||
|
|
*/
|
||
|
|
import './UsageBadge.css'
|
||
|
|
|
||
|
|
export default function UsageBadge({ used, limit, remaining, allowed }) {
|
||
|
|
// Don't show badge if unlimited
|
||
|
|
if (limit === null || limit === undefined) {
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
|
||
|
|
// Determine status for color coding
|
||
|
|
let status = 'ok'
|
||
|
|
if (!allowed || remaining < 0) {
|
||
|
|
status = 'exceeded'
|
||
|
|
} else if (limit > 0 && remaining <= Math.ceil(limit * 0.2)) {
|
||
|
|
// Warning at 20% or less remaining
|
||
|
|
status = 'warning'
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<span className={`usage-badge usage-badge--${status}`}>
|
||
|
|
({used}/{limit})
|
||
|
|
</span>
|
||
|
|
)
|
||
|
|
}
|