Delete member

src/components/Courses/index.svelte

@@ -1,55 +1,20 @@
 <script>
-  import Education16 from 'carbon-icons-svelte/lib/Education16';
-  import Catalog16 from 'carbon-icons-svelte/lib/Catalog16';
-  // import Chip from '../Chip/index.svelte';
+  import Box from '../Box/index.svelte';
+  import Card from './components/Card/index.svelte';
   import { courses } from './store';
 </script>
 
-<div class="courses">
+<div class="flex items-center flex-wrap my-4 m-auto">
   {#each $courses as courseData}
-    <div class="course">
-      <h4 class="course-title">
-        <a rel="prefetch" href="/courses/{courseData.id}">{courseData.title}</a>
-        <!-- <Chip
-          value={courseData.chipLabel}
-          className={courseData.chipClassName}
-        /> -->
-      </h4>
-      <p>{courseData.description}</p>
-      <!-- <div class="flex mt-3 mb-2">
-        <span class="flex mr-2"
-          ><Education16 class="mr-2" />
-          5</span
-        >
-        <span class="flex"
-          ><Catalog16 class="mr-2" />
-          20</span
-        >
-      </div> -->
-    </div>
+    <Card
+      id={courseData.id}
+      logo={courseData.logo}
+      title={courseData.title}
+      description={courseData.description}
+    />
+  {:else}
+    <Box>
+      <h3 class="text-2xl text-gray-500">No Course Assigned</h3>
+    </Box>
   {/each}
 </div>
-
-<style>
-  .courses {
-    max-width: 600px;
-    margin: 0 auto;
-    padding: 0 40px;
-  }
-
-  .course {
-    border-bottom: 1px solid var(--border-color);
-    padding: 5px 0 10px;
-  }
-
-  .course-title {
-    width: fit-content;
-    font-size: 18px;
-  }
-
-  span {
-    color: #586069;
-    font-size: 12px;
-    width: 40px;
-  }
-</style>