fix: Correct progress bar logic to show exclusivity percentage
- Display percentage remaining (99% when 5 registered) - Progress bar width matches display percentage - Use Math.floor for more precise percentage display - Bar shows decreasing exclusivity as registrations increase - Maintains visual consistency between text and bar
This commit is contained in:
@@ -17,7 +17,9 @@ const LiveCounter: React.FC<LiveCounterProps> = ({ onJoinWaitlist, onOpenLogin }
|
||||
}, [remainingSpots, totalSpots]);
|
||||
|
||||
const isLive = remainingSpots > 0;
|
||||
const percentageLeft = (remainingSpots / totalSpots) * 100;
|
||||
const takenSpots = totalSpots - remainingSpots;
|
||||
const percentageTaken = (takenSpots / totalSpots) * 100;
|
||||
const displayPercentage = 100 - percentageTaken;
|
||||
|
||||
return (
|
||||
<div className="fixed top-6 right-6 z-50 group">
|
||||
@@ -59,13 +61,13 @@ const LiveCounter: React.FC<LiveCounterProps> = ({ onJoinWaitlist, onOpenLogin }
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-cream/50 font-elegant-sans text-xs">Progress</span>
|
||||
<span className="text-luxury-gold font-elegant-sans text-xs font-medium">
|
||||
{Math.round(percentageLeft)}%
|
||||
{Math.floor(displayPercentage)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-deep-forest/50 rounded-full h-2 overflow-hidden">
|
||||
<div
|
||||
className="bg-gradient-to-r from-luxury-gold via-cream to-luxury-gold h-2 rounded-full transition-all duration-1000 ease-out relative"
|
||||
style={{ width: `${percentageLeft}%` }}
|
||||
style={{ width: `${displayPercentage}%` }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-white/20 animate-pulse"></div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user