53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
|
import clsx from 'clsx'
|
||
|
|
|
||
|
|
function toneClasses(tone: 'neutral' | 'success' | 'warning' | 'info') {
|
||
|
|
switch (tone) {
|
||
|
|
case 'success':
|
||
|
|
return 'border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-200'
|
||
|
|
case 'warning':
|
||
|
|
return 'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-200'
|
||
|
|
case 'info':
|
||
|
|
return 'border-sky-200 bg-sky-50 text-sky-800 dark:border-sky-900 dark:bg-sky-950/40 dark:text-sky-200'
|
||
|
|
default:
|
||
|
|
return 'border-gray-200 bg-gray-50 text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export function getEntityBadgeTone(tag: string): 'neutral' | 'success' | 'warning' | 'info' {
|
||
|
|
const normalized = tag.toLowerCase()
|
||
|
|
if (normalized === 'compliant' || normalized === 'listed' || normalized === 'verified') {
|
||
|
|
return 'success'
|
||
|
|
}
|
||
|
|
if (normalized === 'wrapped') {
|
||
|
|
return 'warning'
|
||
|
|
}
|
||
|
|
if (normalized === 'bridge' || normalized === 'canonical' || normalized === 'official') {
|
||
|
|
return 'info'
|
||
|
|
}
|
||
|
|
return 'neutral'
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function EntityBadge({
|
||
|
|
label,
|
||
|
|
tone,
|
||
|
|
className,
|
||
|
|
}: {
|
||
|
|
label: string
|
||
|
|
tone?: 'neutral' | 'success' | 'warning' | 'info'
|
||
|
|
className?: string
|
||
|
|
}) {
|
||
|
|
const resolvedTone = tone || getEntityBadgeTone(label)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<span
|
||
|
|
className={clsx(
|
||
|
|
'rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-wide',
|
||
|
|
toneClasses(resolvedTone),
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{label}
|
||
|
|
</span>
|
||
|
|
)
|
||
|
|
}
|