Add classes and class pages

src/components/Classes/index.svelte

@@ -1,28 +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";
 
-  export let classes = [1, 2, 3, 4, 5, 6, 7];
+  export let classes = [
+    {
+      chipClassName: "bg-green-400 text-gray-100",
+      chipLabel: "In progress",
+    },
+    {
+      chipClassName: "bg-red-500 text-gray-100",
+      chipLabel: "Completed",
+    },
+  ];
 </script>
 
-<div class="classes">
-  {#each classes as classData}
-    <div class="class">
-      <h4 class="class-title">
-        <a rel="prefetch" href="classes/1">React.JS 001</a>
-      </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>
-      <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>
-  {/each}
-</div>
-
 <style>
   .classes {
     max-width: 600px;
@@ -46,3 +38,24 @@
     width: 40px;
   }
 </style>
+
+<div class="classes">
+  {#each classes as classData, index}
+    <div class="class">
+      <h4 class="class-title">
+        <a rel="prefetch" href="classes/1">QA Automation 0{classes.length - index}</a>
+        <Chip value={classData.chipLabel} className={classData.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>
+      <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>
+  {/each}
+</div>