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]);
|
}, [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>
|
||||||
|
|||||||
Reference in New Issue
Block a user