ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CLASSROOMIO-T-86:Implemented the my learning page

Browse Source 
Co-authored-by: Ifeanyi Nwosu <[email protected]>

Merge-request: CLASSROOMIO-MR-42
Merged-by: Best Admin <[email protected]>
This commit is contained in:
tunny17
2023-08-15 14:28:51 +00:00
committed by Space Cloud
co-authored by Ifeanyi Nwosu
parent 6253c4598e
commit 1649a703d8
14 changed files with 459 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Tabs/index.svelte
+46 -28
View File
@@ -8,34 +8,52 @@
<div class="w-full flex flex-col">
<div class="flex items-center border-b-2 w-full">
{#each tabs as tab}
<button
class="relative {currentTab === tab.value
? 'text-blue-700'
: 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-24 text-left py-3 mr-10"
on:click={onChange(tab.value)}
>
<div class="grid grid-cols-4 gap-3 items-center">
{#if tab.icon}
<svelte:component this={tab.icon} />
{/if}
{tab.label}
{#if typeof tab.badgeValue === 'number'}
<TextChip
value={tab.badgeValue}
size="sm"
shape="rounded-full"
className=" bg-gray-300 dark:text-black text-xs absolute right-0 px-2"
/>
{/if}
</div>
<span
class="absolute bottom-0 left-0 h-1 bg-blue-700 transition-all ease-in-out duration-500 {currentTab ===
tab.value
? 'w-full'
: 'w-0'}"
/>
</button>
{#if !tab.icon && !tab.badgeValue}
<button
class="relative {currentTab === tab.value
? 'text-blue-700'
: 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-fit mr-8 text-center py-3"
on:click={onChange(tab.value)}
>
<div class="flex items-center justify-center w-full text-center">
{tab.label}
</div>
<span
class="absolute bottom-0 left-0 h-1 bg-blue-700 transition-all ease-in-out duration-500 {currentTab ===
tab.value
? 'w-full'
: 'w-0'}"
/>
</button>
{:else}
<button
class="relative {currentTab === tab.value
? 'text-blue-700'
: 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-24 text-left py-3 mr-10"
on:click={onChange(tab.value)}
>
<div class="grid grid-cols-4 gap-3 items-center">
{#if tab.icon}
<svelte:component this={tab.icon} />
{/if}
{tab.label}
{#if typeof tab.badgeValue === 'number'}
<TextChip
value={tab.badgeValue}
size="sm"
shape="rounded-full"
className=" bg-gray-300 dark:text-black text-xs absolute right-0 px-2"
/>
{/if}
</div>
<span
class="absolute bottom-0 left-0 h-1 bg-blue-700 transition-all ease-in-out duration-500 {currentTab ===
tab.value
? 'w-full'
: 'w-0'}"
/>
</button>
{/if}
{/each}
</div>