39 lines
1.5 KiB
React
39 lines
1.5 KiB
React
import React from 'react';
|
|
|
|
const TIERS = [
|
|
{ min: 0, max: 4, label: 'Tier 0-1 — Elite Standing', color: '#28a745', bg: '#d4edda' },
|
|
{ min: 5, max: 9, label: 'Tier 1 — Realignment', color: '#856404', bg: '#fff3cd' },
|
|
{ min: 10, max: 14, label: 'Tier 2 — Administrative Lockdown', color: '#d9534f', bg: '#f8d7da' },
|
|
{ min: 15, max: 19, label: 'Tier 3 — Verification', color: '#d9534f', bg: '#f8d7da' },
|
|
{ min: 20, max: 24, label: 'Tier 4 — Risk Mitigation', color: '#721c24', bg: '#f5c6cb' },
|
|
{ min: 25, max: 29, label: 'Tier 5 — Final Decision', color: '#721c24', bg: '#f5c6cb' },
|
|
{ min: 30, max: 999,label: 'Tier 6 — Separation', color: '#fff', bg: '#721c24' },
|
|
];
|
|
|
|
export function getTier(points) {
|
|
return TIERS.find(t => points >= t.min && points <= t.max) || TIERS[0];
|
|
}
|
|
|
|
export function getNextTier(points) {
|
|
const idx = TIERS.findIndex(t => points >= t.min && points <= t.max);
|
|
return idx >= 0 && idx < TIERS.length - 1 ? TIERS[idx + 1] : null;
|
|
}
|
|
|
|
export default function CpasBadge({ points }) {
|
|
const tier = getTier(points);
|
|
return (
|
|
<span style={{
|
|
display: 'inline-block',
|
|
padding: '4px 10px',
|
|
borderRadius: '12px',
|
|
fontSize: '12px',
|
|
fontWeight: 700,
|
|
color: tier.color,
|
|
background: tier.bg,
|
|
border: `1px solid ${tier.color}`,
|
|
}}>
|
|
{points} pts — {tier.label}
|
|
</span>
|
|
);
|
|
}
|