CLASSROOMIO-T-84: Final fix

src/lib/components/Tabs/index.svelte

@@ -1,4 +1,5 @@
 <script>
+  import TextChip from '$lib/components/Chip/Text.svelte';
   export let tabs = [];
   export let currentTab;
   export let onChange;
@@ -10,18 +11,24 @@
       <button
         class="relative {currentTab === tab.value
           ? 'text-blue-500 dark:bg-gray-700'
-          : 'dark:bg-gray-500 text-black'} font-semibold focus:outline-none w-16 text-left py-3 mr-10"
+          : 'dark:bg-gray-500 text-black'} font-semibold focus:outline-none w-24 text-left py-3 mr-10"
         on:click={onChange(tab.value)}
       >
-        <div class="grid grid-cols-3 gap-4 items-center">
-          <svelte:component this={tab.icon} />
+        <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>
 
-        <!-- {#if typeof tab.badgeValue === 'number'}
-          <Chip value={tab.badgeValue} className="ml-1 bg-gray-300 dark:text-black" />
-        {/if} -->
-
         <span
           class="absolute bottom-0 left-0 h-1 bg-blue-500 rounded-md transition-all ease-in-out duration-500 {currentTab ===
           tab.value