Sync with Server

src/components/Courses/index.svelte

@@ -1,36 +1,21 @@
 <script>
-  import Education16 from "carbon-icons-svelte/lib/Education16";
-  import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
-  import Chip from "../Chip/index.svelte";
-
-  export let courses = [
-    {
-      chipClassName: "bg-green-600 text-white",
-      chipLabel: "In progress",
-    },
-    {
-      chipClassName: "bg-red-600 text-white",
-      chipLabel: "Completed",
-    },
-  ];
+  import Education16 from 'carbon-icons-svelte/lib/Education16';
+  import Catalog16 from 'carbon-icons-svelte/lib/Catalog16';
+  // import Chip from '../Chip/index.svelte';
+  import { courses } from './store';
 </script>
 
 <div class="courses">
-  {#each courses as courseData, index}
+  {#each $courses as courseData}
     <div class="course">
       <h4 class="course-title">
-        <a rel="prefetch" href="courses/1"
-          >QA Automation 0{courses.length - index}</a
-        >
-        <Chip
+        <a rel="prefetch" href="/courses/{courseData.id}">{courseData.title}</a>
+        <!-- <Chip
           value={courseData.chipLabel}
           className={courseData.chipClassName}
-        />
+        /> -->
       </h4>
-      <p>
-        Here is some description about the course that you should know. It will
-        begin on the first and end on the second of the next month.
-      </p>
+      <p>{courseData.description}</p>
       <div class="flex mt-3 mb-2">
         <span class="flex mr-2"
           ><Education16 class="mr-2" />