48 lines
1.8 KiB
JavaScript
48 lines
1.8 KiB
JavaScript
import React from 'react'
|
|
|
|
function toneClasses(tone) {
|
|
switch (tone) {
|
|
case 'featured':
|
|
return 'border-amber-300/30 bg-amber-400/12 text-amber-50 hover:border-amber-300/45 hover:bg-amber-400/18'
|
|
case 'community':
|
|
return 'border-sky-300/25 bg-sky-300/10 text-sky-100 hover:border-sky-300/40 hover:bg-sky-300/15'
|
|
case 'curated':
|
|
return 'border-emerald-300/25 bg-emerald-400/10 text-emerald-100 hover:border-emerald-300/40 hover:bg-emerald-400/15'
|
|
default:
|
|
return 'border-white/10 bg-white/[0.04] text-white hover:border-white/20 hover:bg-white/[0.07]'
|
|
}
|
|
}
|
|
|
|
export default function WorldParticipationBadge({ items = [] }) {
|
|
const badges = Array.isArray(items) ? items : []
|
|
|
|
if (badges.length === 0) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="mt-4 flex flex-wrap items-center gap-2.5">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">World participation</span>
|
|
{badges.map((item) => {
|
|
const label = item?.badge_label || item?.world_title || 'World participation'
|
|
const badgeClassName = `inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm font-medium transition ${toneClasses(item?.tone)}`
|
|
|
|
if (item?.world_url) {
|
|
return (
|
|
<a key={`${item.world_id}-${item.status || item.tone || 'world'}`} href={item.world_url} className={badgeClassName}>
|
|
<i className="fa-solid fa-globe text-[11px]" />
|
|
<span>{label}</span>
|
|
</a>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<span key={`${item.world_id}-${item.status || item.tone || 'world'}`} className={badgeClassName}>
|
|
<i className="fa-solid fa-globe text-[11px]" />
|
|
<span>{label}</span>
|
|
</span>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
} |