44 lines
1.2 KiB
JavaScript
44 lines
1.2 KiB
JavaScript
import React from 'react'
|
|
|
|
function formatXp(value) {
|
|
return new Intl.NumberFormat().format(Number(value || 0))
|
|
}
|
|
|
|
function clampPercent(value) {
|
|
const numeric = Number(value || 0)
|
|
if (!Number.isFinite(numeric)) return 0
|
|
return Math.max(0, Math.min(100, numeric))
|
|
}
|
|
|
|
function cx(...parts) {
|
|
return parts.filter(Boolean).join(' ')
|
|
}
|
|
|
|
export default function XPProgressBar({
|
|
xp = 0,
|
|
currentLevelXp = 0,
|
|
nextLevelXp = 100,
|
|
progressPercent = 0,
|
|
maxLevel = false,
|
|
className = '',
|
|
}) {
|
|
const percent = maxLevel ? 100 : clampPercent(progressPercent)
|
|
|
|
return (
|
|
<div className={cx('space-y-2', className)}>
|
|
<div className="flex items-center justify-between gap-3 text-xs text-slate-300">
|
|
<span>{formatXp(xp)} XP</span>
|
|
<span>
|
|
{maxLevel ? 'Max level reached' : `${formatXp(currentLevelXp)} / ${formatXp(nextLevelXp)} XP`}
|
|
</span>
|
|
</div>
|
|
<div className="h-2.5 overflow-hidden rounded-full bg-white/10 ring-1 ring-white/10">
|
|
<div
|
|
className="h-full rounded-full bg-[linear-gradient(90deg,#38bdf8_0%,#a78bfa_55%,#f59e0b_100%)] transition-[width] duration-500"
|
|
style={{ width: `${percent}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|