CLASSROOMIO-T-84: Tabs Testing

src/lib/components/Course/components/Lesson/Materials/constants.js

@@ -1,17 +1,17 @@
 export const tabs = [
   {
-    label: 'Slide',
+    label: 'Note',
     value: 1,
-    badgeValue: 0,
+    badgeValue: 0
   },
   {
-    label: 'Note',
+    label: 'Slide',
     value: 2,
-    badgeValue: 0,
+    badgeValue: 0
   },
   {
     label: 'Video',
     value: 3,
-    badgeValue: 0,
+    badgeValue: 0
-  },
+  }
 ];

src/lib/components/Tabs/index.svelte

@@ -6,22 +6,21 @@
 </script>
 
 <div class="w-full flex flex-col">
-  <div class="flex items-center justify-center">
+  <div class="flex items-center">
     {#each tabs as tab}
       <button
-        class="relative border-r-1 border-t-0 border-b-0 border-l-0 rounded-none {currentTab ===
+        class="relative {currentTab === tab.value
-        tab.value
+          ? 'text-blue-500 font-semibold dark:bg-gray-700'
-          ? 'text-black font-bold bg-gray-100 dark:bg-gray-700'
+          : 'dark:bg-gray-500'} focus:outline-none w-32 text-left p-3"
-          : 'bg-gray-200 dark:bg-gray-500 text-gray'} focus:outline-none w-40 text-left p-3"
         on:click={onChange(tab.value)}
       >
         {tab.label}
-        {#if typeof tab.badgeValue === 'number'}
+        <!-- {#if typeof tab.badgeValue === 'number'}
           <Chip value={tab.badgeValue} className="ml-1 bg-gray-300 dark:text-black" />
-        {/if}
+        {/if} -->
 
         {#if currentTab === tab.value}
-          <span class="absolute w-full top-0 left-0 h-1 bg-blue-500" />
+          <span class="absolute w-2/4 bottom-0 left-0 h-1 bg-blue-500" />
         {/if}
       </button>
     {/each}