From 01bb9e8141b55369439d834ef9d9d5349709973b Mon Sep 17 00:00:00 2001
From: tunny17 <tunji@digdippa.com>
Date: Thu, 10 Aug 2023 12:50:53 +0100
Subject: [PATCH] CLASSROOMIO-T-84: Unresolved Fix

---
 .../components/Lesson/Materials/constants.js  |  5 ++++
 src/lib/components/Tabs/index.svelte          | 23 ++++---------------
 2 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/Course/components/Lesson/Materials/constants.js b/src/lib/components/Course/components/Lesson/Materials/constants.js
index 27190bb2..da4f283e 100644
--- a/src/lib/components/Course/components/Lesson/Materials/constants.js
+++ b/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
   }
diff --git a/src/lib/components/Tabs/index.svelte b/src/lib/components/Tabs/index.svelte
index f6f764a8..0a82923a 100644
--- a/src/lib/components/Tabs/index.svelte
+++ b/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} -->