60 lines
2.2 KiB
TypeScript
60 lines
2.2 KiB
TypeScript
import { cn } from "~/lib/utils"
|
|
|
|
export const BoostProgress = ({
|
|
level,
|
|
boostCount,
|
|
remainingBoostsToLevelUp,
|
|
lastValidBoost,
|
|
}: {
|
|
level: number
|
|
boostCount: number
|
|
remainingBoostsToLevelUp: number
|
|
lastValidBoost: {
|
|
hash: string | null
|
|
expiresAt: string
|
|
} | null
|
|
}) => {
|
|
const percentage = (boostCount / (boostCount + remainingBoostsToLevelUp)) * 100
|
|
const nextLevel = level + 1
|
|
return (
|
|
<div className="flex w-full flex-col px-2">
|
|
<div className="relative w-full pt-12">
|
|
<span
|
|
className={cn(
|
|
"absolute bottom-0 mb-10 flex h-8 w-12 -translate-x-1/2 items-center justify-center whitespace-nowrap rounded-full px-3.5 py-2 text-sm font-bold text-white transition-all duration-500 ease-out after:absolute after:bottom-[-5px] after:left-1/2 after:-z-10 after:flex after:size-3 after:-translate-x-1/2 after:rotate-45 ",
|
|
"bg-orange-500 after:bg-orange-500",
|
|
)}
|
|
style={{ left: `${percentage}%` }}
|
|
>
|
|
<i className="i-mgc-train-cute-fi mr-2 shrink-0" />
|
|
{boostCount}
|
|
</span>
|
|
<div className="relative flex h-6 w-full overflow-hidden rounded-3xl bg-gray-200 dark:bg-gray-800">
|
|
<div
|
|
role="progressbar"
|
|
aria-valuenow={boostCount}
|
|
aria-valuemin={0}
|
|
aria-valuemax={remainingBoostsToLevelUp}
|
|
style={{ width: `${percentage}%` }}
|
|
className="flex h-full items-center justify-center rounded-3xl bg-accent text-white transition-all duration-500 ease-out"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-2 flex items-center justify-between">
|
|
<span className="text-lg font-bold text-accent">Lv. {level}</span>
|
|
<span className="text-lg font-bold text-accent">Lv. {nextLevel}</span>
|
|
</div>
|
|
<small className="center mt-1 gap-1">
|
|
{remainingBoostsToLevelUp} more boost will unlock the next level of benefits!
|
|
</small>
|
|
{lastValidBoost && (
|
|
<small className="center mt-1 gap-1">
|
|
You can't add more boost points right now, but feel free to keep boosting. Your current
|
|
boost will expire on {new Date(lastValidBoost.expiresAt).toLocaleDateString()}.
|
|
</small>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|