d783040030
Split license limits into metered "Resource Usage" (with color-coded progress bars) and static "Plan Limits" cards. Updated UsageIndicator with 8px bars, green/amber/red thresholds, and tabular-nums formatting. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import styles from '../styles/platform.module.css';
|
|
|
|
interface Props {
|
|
used: number;
|
|
limit: number;
|
|
label: string;
|
|
}
|
|
|
|
function barColor(pct: number): string {
|
|
if (pct >= 100) return 'var(--error)';
|
|
if (pct >= 75) return 'var(--warning)';
|
|
return 'var(--success)';
|
|
}
|
|
|
|
export function UsageIndicator({ used, limit, label }: Props) {
|
|
const unlimited = limit < 0;
|
|
const pct = unlimited ? 0 : limit === 0 ? 100 : Math.min((used / limit) * 100, 100);
|
|
|
|
return (
|
|
<div className={styles.usageRow}>
|
|
<div className={styles.usageHeader}>
|
|
<span className={styles.usageLabel}>{label}</span>
|
|
<span className={styles.usageValue} style={pct >= 100 ? { color: 'var(--error)', fontWeight: 600 } : undefined}>
|
|
{used.toLocaleString()}{' / '}{unlimited ? '\u221e' : limit.toLocaleString()}
|
|
</span>
|
|
</div>
|
|
{!unlimited && (
|
|
<div className={styles.usageBarTrack}>
|
|
<div
|
|
className={styles.usageBarFill}
|
|
style={{ width: `${Math.max(pct, 2)}%`, background: barColor(pct) }}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|