Makes the active tab easier to determine

This commit is contained in:
2026-05-18 11:35:45 -05:00
parent 51a9448fdb
commit 2c614a2d46

View File

@@ -48,13 +48,19 @@
<div class="p-4 pb-20">
<div class="tabs tabs-boxed bg-base-200 mb-4">
<button class="tab flex-1" class:tab-active={tab === 'active'} onclick={() => tab = 'active'}>
<button
class="tab flex-1 font-bold transition-all {tab === 'active' ? 'bg-primary text-primary-content rounded-lg' : 'text-base-content/40'}"
onclick={() => tab = 'active'}
>
Active
{#if ongoing.length > 0}<span class="badge badge-primary badge-sm ml-1">{ongoing.length}</span>{/if}
{#if ongoing.length > 0}<span class="badge badge-md ml-1 {tab === 'active' ? 'badge-outline' : 'badge-primary'}">{ongoing.length}</span>{/if}
</button>
<button class="tab flex-1" class:tab-active={tab === 'upcoming'} onclick={() => tab = 'upcoming'}>
<button
class="tab flex-1 font-bold transition-all {tab === 'upcoming' ? 'bg-primary text-primary-content rounded-lg' : 'text-base-content/40'}"
onclick={() => tab = 'upcoming'}
>
Upcoming
{#if upcoming.length > 0}<span class="badge badge-info badge-sm ml-1">{upcoming.length}</span>{/if}
{#if upcoming.length > 0}<span class="badge badge-md ml-1 {tab === 'upcoming' ? 'badge-outline' : 'badge-info'}">{upcoming.length}</span>{/if}
</button>
</div>