35 lines
1.3 KiB
JavaScript
35 lines
1.3 KiB
JavaScript
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>
|
|
)
|
|
} |