fix: update availableSpots message to handle singular and plural forms

This commit is contained in:
Frank Meeuwsen 2026-03-03 10:17:48 +01:00
parent 3a81eff7c1
commit 07f504c989
3 changed files with 4 additions and 4 deletions

View file

@ -51,7 +51,7 @@ function FinalCTA() {
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg> </svg>
<span>Er zijn nog {availableSpots} plekken beschikbaar</span> <span>Er zijn nog {availableSpots} {availableSpots === 1 ? 'plek' : 'plekken'} beschikbaar</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">

View file

@ -39,7 +39,7 @@ function Hero() {
</span> </span>
{isSoldOut {isSoldOut
? 'Volgeboekt - wachtlijst beschikbaar' ? 'Volgeboekt - wachtlijst beschikbaar'
: <><span className="line-through opacity-60">{totalSpots}</span>{' '}{availableSpots} plekken - kleine groep, persoonlijke aandacht</> : <><span className="line-through opacity-60">{totalSpots}</span>{' '}{availableSpots} {availableSpots === 1 ? 'plek' : 'plekken'} - kleine groep, persoonlijke aandacht</>
} }
</span> </span>
</div> </div>

View file

@ -64,7 +64,7 @@ function StickyBar() {
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
</svg> </svg>
Nog {availableSpots} plekken beschikbaar Nog {availableSpots} {availableSpots === 1 ? 'plek' : 'plekken'} beschikbaar
</span> </span>
</div> </div>
</div> </div>
@ -98,7 +98,7 @@ function StickyBar() {
6 maart 2026 | Utrecht 6 maart 2026 | Utrecht
</div> </div>
<div className="text-xs text-coral-600 font-medium"> <div className="text-xs text-coral-600 font-medium">
{isSoldOut ? 'Volgeboekt' : `Nog ${availableSpots} plekken beschikbaar`} {isSoldOut ? 'Volgeboekt' : `Nog ${availableSpots} ${availableSpots === 1 ? 'plek' : 'plekken'} beschikbaar`}
</div> </div>
</div> </div>