update

resources/js/components/achievements/AchievementBadge.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+const TYPE_TONES = {
+  Uploads: 'border-amber-400/40 bg-amber-500/10 text-amber-100',
+  Engagement: 'border-rose-400/40 bg-rose-500/10 text-rose-100',
+  Social: 'border-sky-400/40 bg-sky-500/10 text-sky-100',
+  Stories: 'border-emerald-400/40 bg-emerald-500/10 text-emerald-100',
+  Milestones: 'border-violet-400/40 bg-violet-500/10 text-violet-100',
+}
+
+function cx(...parts) {
+  return parts.filter(Boolean).join(' ')
+}
+
+export default function AchievementBadge({ achievement, compact = false, className = '' }) {
+  const tone = TYPE_TONES[achievement?.type] || TYPE_TONES.Milestones
+  const unlocked = Boolean(achievement?.unlocked)
+
+  return (
+    <span
+      className={cx(
+        'inline-flex items-center gap-2 rounded-full border px-2.5 py-1 font-semibold tracking-[0.08em]',
+        compact ? 'text-[10px] uppercase' : 'text-[11px] uppercase',
+        unlocked ? tone : 'border-white/10 bg-white/5 text-slate-300',
+        className,
+      )}
+    >
+      <i className={`fa-solid ${achievement?.icon || 'fa-trophy'} text-[0.9em]`} />
+      <span>{achievement?.type || 'Achievement'}</span>
+    </span>
+  )
+}