Build world campaigns rewards and recaps
This commit is contained in:
@@ -1,9 +1,13 @@
|
||||
import React from 'react'
|
||||
import AchievementsList from '../../achievements/AchievementsList'
|
||||
|
||||
export default function TabAchievements({ achievements }) {
|
||||
export default function TabAchievements({ achievements, worldRewards, worldHistory, onTabChange }) {
|
||||
const unlocked = Array.isArray(achievements?.unlocked) ? achievements.unlocked : []
|
||||
const locked = Array.isArray(achievements?.locked) ? achievements.locked : []
|
||||
const historyAvailable = Boolean(worldHistory?.summary?.available)
|
||||
const worldAppearances = worldHistory?.summary?.world_appearances || worldHistory?.summary?.worlds_joined || worldRewards?.count || 0
|
||||
const featuredCount = worldHistory?.summary?.featured_appearances || 0
|
||||
const winnerFinalistCount = worldHistory?.summary?.finalist_winner_appearances || 0
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -30,6 +34,45 @@ export default function TabAchievements({ achievements }) {
|
||||
</div>
|
||||
|
||||
<AchievementsList unlocked={unlocked} locked={locked} />
|
||||
|
||||
{historyAvailable ? (
|
||||
<section className="mt-8">
|
||||
<div className="rounded-[28px] border border-white/10 bg-white/[0.04] p-5 shadow-[0_18px_44px_rgba(2,6,23,0.18)] md:p-6">
|
||||
<div>
|
||||
<h3 className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Worlds history</h3>
|
||||
<p className="mt-2 text-sm text-slate-300">
|
||||
World participation and recognition now live in a dedicated history view so recurring editions, challenge results, and standout placements read like a creator story instead of a badge dump.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid gap-3 md:grid-cols-3">
|
||||
<div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-4">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">World Appearances</div>
|
||||
<div className="mt-2 text-2xl font-bold tracking-tight text-white">{worldAppearances}</div>
|
||||
</div>
|
||||
<div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-4">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Featured</div>
|
||||
<div className="mt-2 text-2xl font-bold tracking-tight text-white">{featuredCount}</div>
|
||||
</div>
|
||||
<div className="rounded-[24px] border border-white/10 bg-white/[0.03] p-4">
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Wins / Finalists</div>
|
||||
<div className="mt-2 text-2xl font-bold tracking-tight text-white">{winnerFinalistCount}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 flex flex-wrap gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onTabChange?.('worlds')}
|
||||
className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.05] px-4 py-2.5 text-sm font-medium text-slate-100 transition-colors hover:bg-white/[0.08]"
|
||||
>
|
||||
<i className="fa-solid fa-globe text-xs" />
|
||||
Open worlds history
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
15
resources/js/components/profile/tabs/TabWorlds.jsx
Normal file
15
resources/js/components/profile/tabs/TabWorlds.jsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import React from 'react'
|
||||
import ProfileWorldHistorySection from '../worlds/ProfileWorldHistorySection'
|
||||
|
||||
export default function TabWorlds({ worldHistory, isOwner }) {
|
||||
return (
|
||||
<div
|
||||
id="tabpanel-worlds"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tab-worlds"
|
||||
className="pt-6"
|
||||
>
|
||||
<ProfileWorldHistorySection history={worldHistory} isOwner={isOwner} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user