Files
SkinbaseNova/resources/js/components/worlds/WorldStatusBadge.jsx

23 lines
764 B
JavaScript

import React from 'react'
const TONE_CLASSNAMES = {
slate: 'border-white/12 bg-white/[0.06] text-slate-100',
sky: 'border-sky-300/25 bg-sky-400/12 text-sky-100',
emerald: 'border-emerald-300/25 bg-emerald-400/12 text-emerald-100',
amber: 'border-amber-300/25 bg-amber-400/12 text-amber-100',
rose: 'border-rose-300/25 bg-rose-400/12 text-rose-100',
}
export default function WorldStatusBadge({ badge, className = '' }) {
if (!badge?.label) {
return null
}
const tone = TONE_CLASSNAMES[badge.tone] || TONE_CLASSNAMES.slate
return (
<span className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] ${tone} ${className}`.trim()}>
{badge.label}
</span>
)
}