28 lines
1.0 KiB
JavaScript
28 lines
1.0 KiB
JavaScript
import React from 'react'
|
|
|
|
function toneClasses(tone, isPrimary) {
|
|
const styles = {
|
|
emerald: 'border-emerald-300/20 bg-emerald-400/12 text-emerald-100',
|
|
violet: 'border-violet-300/20 bg-violet-400/12 text-violet-100',
|
|
amber: 'border-amber-300/20 bg-amber-400/12 text-amber-100',
|
|
rose: 'border-rose-300/20 bg-rose-400/12 text-rose-100',
|
|
sky: 'border-sky-300/20 bg-sky-400/12 text-sky-100',
|
|
slate: 'border-slate-300/15 bg-slate-300/10 text-slate-200',
|
|
}
|
|
|
|
const base = styles[tone] || styles.sky
|
|
return `${base} ${isPrimary ? 'shadow-[0_0_22px_rgba(255,255,255,0.05)]' : ''}`.trim()
|
|
}
|
|
|
|
export default function ProfileWorldRecognitionBadge({ recognition, isPrimary = false }) {
|
|
if (!recognition) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<span className={`inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] ${toneClasses(recognition.tone, isPrimary)}`}>
|
|
<span className="h-1.5 w-1.5 rounded-full bg-current opacity-80" />
|
|
{recognition.label}
|
|
</span>
|
|
)
|
|
} |