Build world campaigns rewards and recaps

resources/js/components/profile/worlds/ProfileWorldRecognitionBadge.jsx

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