CLASSROOMIO-T-84: Unresolved Fix

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

@@ -1,16 +1,21 @@
+import { Video, Notebook, PresentationFile } from 'carbon-icons-svelte';
+
 export const tabs = [
   {
     label: 'Note',
+    icon: Notebook,
     value: 1,
     badgeValue: 0
   },
   {
     label: 'Slide',
+    icon: PresentationFile,
     value: 2,
     badgeValue: 0
   },
   {
     label: 'Video',
+    icon: Video,
     value: 3,
     badgeValue: 0
   }

src/lib/components/Tabs/index.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { Video, Notebook, PresentationFile } from 'carbon-icons-svelte';
   export let tabs = [];
   export let currentTab;
   export let onChange;
@@ -14,23 +13,11 @@
           : 'dark:bg-gray-500 text-black'} font-semibold focus:outline-none w-16 text-left py-3 mr-10"
         on:click={onChange(tab.value)}
       >
-        {#if tab.value === 1}
-          <div class="grid grid-cols-3 gap-4 items-center">
-            <Notebook />
-            {tab.label}
-          </div>
-        {:else if tab.value === 2}
-          <div class="grid grid-cols-3 gap-4 items-center">
-            <PresentationFile />
-            {tab.label}
-          </div>
-        {:else}
-          <div class="grid grid-cols-3 gap-4 items-center">
-            <Video />
-            {tab.label}
-          </div>
-        {/if}
-        <!-- {tab.label} -->
+        <div class="grid grid-cols-3 gap-4 items-center">
+          <svelte:component this={tab.icon} />
+          {tab.label}
+        </div>
+
         <!-- {#if typeof tab.badgeValue === 'number'}
           <Chip value={tab.badgeValue} className="ml-1 bg-gray-300 dark:text-black" />
         {/if} -->