Makes the active tab easier to determine
This commit is contained in:
@@ -48,13 +48,19 @@
|
|||||||
|
|
||||||
<div class="p-4 pb-20">
|
<div class="p-4 pb-20">
|
||||||
<div class="tabs tabs-boxed bg-base-200 mb-4">
|
<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
|
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>
|
||||||
<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
|
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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user