Save workspace changes

resources/js/components/artwork/WorldParticipationBadge.jsx

@@ -0,0 +1,48 @@
+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>
+  )
+}