Add drag and drop + all exercise page

src/components/Course/components/Lesson/Exercises/index.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { Modal } from 'carbon-components-svelte';
   import PrimaryButton from '../../../../PrimaryButton/index.svelte';
   import PageBody from '../../../../PageBody/index.svelte';
+  import Modal from '../../../../Modal/index.svelte';
   import TextField from '../../../../Form/TextField.svelte';
   import Exercise from '../Exercise/index.svelte';
 
@@ -46,22 +46,23 @@
   <Exercise {exerciseId} />
 {:else}
   <Modal
-    size="xs"
+    onClose={handleCancelAddExercise}
     bind:open
     modalHeading="Create an Exercise"
-    primaryButtonText="Confirm"
-    secondaryButtonText="Cancel"
-    on:click:button--primary={handleAddExercise}
-    on:click:button--secondary={handleCancelAddExercise}
-    on:open
-    on:close
-    on:submit
   >
     <TextField
       bind:value={newExercise.title}
       autofocus={true}
       placeholder="Exercise name"
     />
+
+    <div class="mt-5 flex items-center">
+      <PrimaryButton
+        className="px-6 py-2"
+        label="Submit"
+        onClick={handleAddExercise}
+      />
+    </div>
   </Modal>
 
   <PageBody width="w-11/12 m-auto">

src/components/Course/components/Lesson/Materials/EditMode.svelte

@@ -1,28 +1,47 @@
 <script>
-  import { Tabs, Tab, TabContent } from 'carbon-components-svelte';
+  import Tabs from '../../../../Tabs/index.svelte';
+  import TabContent from '../../../../Tabs/index.svelte';
   import EditContent from '../../../../EditContent/index.svelte';
   import TextField from '../../../../Form/TextField.svelte';
   import { lesson } from '../store/lessons';
+
+  const tabs = [
+    {
+      label: 'Note',
+      value: 1,
+    },
+    {
+      label: 'Slide',
+      value: 2,
+    },
+    {
+      label: 'Video',
+      value: 3,
+    },
+  ];
+  let currentTab = tabs[0].value;
+
+  function onChange(tabValue) {
+    return () => {
+      currentTab = tabValue;
+    };
+  }
 </script>
 
-<Tabs class="flex justify-center" type="container">
-  <Tab label="Note" />
-  <Tab label="Slide" />
-  <Tab label="Video" />
-
-  <div slot="content">
-    <TabContent>
+<Tabs {tabs} {currentTab} {onChange}>
+  <slot:fragment slot="content">
+    <TabContent value={tabs[0].value} index={currentTab}>
       <EditContent
         writeLabel="Note"
         bind:value={$lesson.materials.note}
         placeholder="Start typing your lesson"
       />
     </TabContent>
-    <TabContent>
+    <TabContent value={tabs[1].value} index={currentTab}>
       <TextField label="Slide link" bind:value={$lesson.materials.slide} />
     </TabContent>
-    <TabContent>
+    <TabContent value={tabs[2].value} index={currentTab}>
       <TextField label="Youtube link" bind:value={$lesson.materials.video} />
     </TabContent>
-  </div>
+  </slot:fragment>
 </Tabs>

src/components/Course/components/Lesson/Materials/ViewMode.svelte

@@ -1,19 +1,38 @@
 <script>
-  import { Tabs, Tab, TabContent } from 'carbon-components-svelte';
+  import Tabs from '../../../../Tabs/index.svelte';
+  import TabContent from '../../../../Tabs/index.svelte';
   import MarkdownRender from '../../../../MarkdownRender/index.svelte';
   import { lesson } from '../store/lessons';
+
+  const tabs = [
+    {
+      label: 'Note',
+      value: 1,
+    },
+    {
+      label: 'Slide',
+      value: 2,
+    },
+    {
+      label: 'Video',
+      value: 3,
+    },
+  ];
+  let currentTab = tabs[0].value;
+
+  function onChange(tabValue) {
+    return () => {
+      currentTab = tabValue;
+    };
+  }
 </script>
 
-<Tabs class="flex justify-center" type="container">
-  <Tab label="Note" />
-  <Tab label="Slide" />
-  <Tab label="Video" />
-
-  <div slot="content">
-    <TabContent>
+<Tabs {tabs} {currentTab} {onChange}>
+  <slot:fragment slot="content">
+    <TabContent value={tabs[0].value} index={currentTab}>
       <MarkdownRender content={$lesson.materials.note} />
     </TabContent>
-    <TabContent>
+    <TabContent value={tabs[1].value} index={currentTab}>
       <iframe
         title="Embeded Slides"
         src={$lesson.materials.slide}
@@ -25,7 +44,7 @@
         webkitallowfullscreen="true"
       />
     </TabContent>
-    <TabContent>
+    <TabContent value={tabs[2].value} index={currentTab}>
       <iframe
         width="100%"
         height="569"
@@ -36,61 +55,5 @@
         allowfullscreen
       />
     </TabContent>
-  </div>
+  </slot:fragment>
 </Tabs>
-
-<!-- <div class="flex mb-2">
-  <button
-    on:click={handleTabClick(0)}
-    class="focus:outline-none text-lg font-bold border-b-2 border-transparent {currentTab ===
-      0 && `${activeClassName}`}"
-  >
-    Note
-  </button>
-  <button
-    on:click={handleTabClick(1)}
-    class="focus:outline-none text-lg font-bold border-b-2 border-transparent {currentTab ===
-      1 && `${activeClassName}`}"
-  >
-    
-  </button>
-  <button
-    on:click={handleTabClick(2)}
-    class="focus:outline-none text-lg font-bold border-b-2 border-transparent {currentTab ===
-      2 && `${activeClassName}`}"
-  >
-    Video
-  </button>
-</div>
-
-<div class="m-2 mb-0 p-0">
-  {#if currentTab === 0}
-    <MarkdownRender content={$lesson.materials.note} />
-  {:else if currentTab === 1}
-    <iframe
-      title="Embeded Slides"
-      src={$lesson.materials.slide}
-      frameborder="0"
-      width="100%"
-      height="569"
-      allowfullscreen="true"
-      mozallowfullscreen="true"
-      webkitallowfullscreen="true"
-    />
-  {:else if currentTab === 2}
-    <iframe
-      width="100%"
-      height="569"
-      src={$lesson.materials.video}
-      title="YouTube video player"
-      frameborder="0"
-      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-      allowfullscreen
-    />
-  {/if}
-</div> -->
-<style>
-  button {
-    padding: 12px 12px 8px 12px;
-  }
-</style>