o2o-infinith-demo/src/components/report/ui/SeverityBadge.tsx

42 lines
1.1 KiB
TypeScript

type SeverityLevel = 'critical' | 'warning' | 'good' | 'excellent' | 'unknown';
interface SeverityBadgeProps {
severity: SeverityLevel;
label?: string;
}
const config: Record<SeverityLevel, { className: string; defaultLabel: string }> = {
critical: {
className: 'bg-[#FFF0F0] text-[#7C3A4B] border-[#F5D5DC]',
defaultLabel: '심각',
},
warning: {
className: 'bg-[#FFF6ED] text-[#7C5C3A] border-[#F5E0C5]',
defaultLabel: '주의',
},
good: {
className: 'bg-[#F3F0FF] text-[#4A3A7C] border-[#D5CDF5]',
defaultLabel: '양호',
},
excellent: {
className: 'bg-[#EFF0FF] text-[#3A3F7C] border-[#C5CBF5]',
defaultLabel: '우수',
},
unknown: {
className: 'bg-slate-50 text-slate-700 border-slate-200',
defaultLabel: '미확인',
},
};
export function SeverityBadge({ severity, label }: SeverityBadgeProps) {
const { className, defaultLabel } = config[severity];
return (
<span
className={`inline-flex items-center rounded-full text-xs font-medium px-3 py-1 border ${className}`}
>
{label ?? defaultLabel}
</span>
);
}