update

resources/js/components/profile/tabs/TabAchievements.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import AchievementsList from '../../achievements/AchievementsList'
+
+export default function TabAchievements({ achievements }) {
+  const unlocked = Array.isArray(achievements?.unlocked) ? achievements.unlocked : []
+  const locked = Array.isArray(achievements?.locked) ? achievements.locked : []
+
+  return (
+    <div
+      id="tabpanel-achievements"
+      role="tabpanel"
+      aria-labelledby="tab-achievements"
+      className="pt-6"
+    >
+      <div className="mb-6 flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <h2 className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Achievements</h2>
+          <p className="mt-2 text-sm text-slate-300">
+            Milestones, creator wins, and level-based unlocks collected on Skinbase.
+          </p>
+        </div>
+        <div className="flex gap-3 text-xs text-slate-400">
+          <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1.5">
+            {achievements?.counts?.unlocked || 0} unlocked
+          </span>
+          <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1.5">
+            {achievements?.counts?.total || 0} total
+          </span>
+        </div>
+      </div>
+
+      <AchievementsList unlocked={unlocked} locked={locked} />
+    </div>
+  )
+}