Makes the active tab easier to determine
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user