update

resources/js/components/achievements/AchievementsList.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import AchievementCard from './AchievementCard'
+
+export default function AchievementsList({ unlocked = [], locked = [], limitLocked }) {
+  const visibleLocked = typeof limitLocked === 'number' ? locked.slice(0, limitLocked) : locked
+
+  return (
+    <div className="space-y-8">
+      <section>
+        <div className="mb-4 flex items-center justify-between gap-3">
+          <h2 className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-400">Unlocked</h2>
+          <span className="text-xs text-slate-500">{unlocked.length} earned</span>
+        </div>
+
+        {unlocked.length === 0 ? (
+          <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-5 py-8 text-sm text-slate-400">
+            No achievements unlocked yet.
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+            {unlocked.map((achievement) => (
+              <AchievementCard key={achievement.id} achievement={achievement} />
+            ))}
+          </div>
+        )}
+      </section>
+
+      <section>
+        <div className="mb-4 flex items-center justify-between gap-3">
+          <h2 className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-400">In Progress</h2>
+          <span className="text-xs text-slate-500">{locked.length} still locked</span>
+        </div>
+
+        {visibleLocked.length === 0 ? null : (
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+            {visibleLocked.map((achievement) => (
+              <AchievementCard key={achievement.id} achievement={achievement} />
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  )
+}