45 lines
1.7 KiB
JavaScript
45 lines
1.7 KiB
JavaScript
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>
|
|
)
|
|
}
|