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:
Hardik Sankhla
2025-09-26 05:02:30 +05:30
parent c2fc570d36
commit 0db1896ec9

View File

@@ -17,7 +17,9 @@ const LiveCounter: React.FC<LiveCounterProps> = ({ onJoinWaitlist, onOpenLogin }
}, [remainingSpots, totalSpots]); }, [remainingSpots, totalSpots]);
const isLive = remainingSpots > 0; const isLive = remainingSpots > 0;
const percentageLeft = (remainingSpots / totalSpots) * 100; const takenSpots = totalSpots - remainingSpots;
const percentageTaken = (takenSpots / totalSpots) * 100;
const displayPercentage = 100 - percentageTaken;
return ( return (
<div className="fixed top-6 right-6 z-50 group"> <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"> <div className="flex justify-between items-center mb-2">
<span className="text-cream/50 font-elegant-sans text-xs">Progress</span> <span className="text-cream/50 font-elegant-sans text-xs">Progress</span>
<span className="text-luxury-gold font-elegant-sans text-xs font-medium"> <span className="text-luxury-gold font-elegant-sans text-xs font-medium">
{Math.round(percentageLeft)}% {Math.floor(displayPercentage)}%
</span> </span>
</div> </div>
<div className="w-full bg-deep-forest/50 rounded-full h-2 overflow-hidden"> <div className="w-full bg-deep-forest/50 rounded-full h-2 overflow-hidden">
<div <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" 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 className="absolute inset-0 bg-white/20 animate-pulse"></div>
</div> </div>