Add classes and class pages

src/components/Chip/index.svelte

@@ -1,9 +1,8 @@
 <script>
   export let value;
+  export let className;
 </script>
 
-<p>{value}</p>
-
 <style>
   p {
     display: inline-block;
@@ -12,11 +11,16 @@
     font-size: 12px;
     font-weight: 500;
     line-height: 18px;
-    color: #586069;
     text-align: center;
-    background-color: #d1d5da80;
     border: 1px solid transparent;
     border-radius: 2em;
     margin: 6px 0 0;
   }
+
+  .bg-set {
+    /* color: #586069;
+    background-color: #d1d5da80; */
+  }
 </style>
+
+<p class="{className} bg-set">{value}</p>

src/components/Classes/Class.svelte

@@ -1,8 +1,66 @@
 <script>
-  export let classData = {};
+  import Education16 from "carbon-icons-svelte/lib/Education16";
+  import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
+
+  export let lectures = [
+    "Today",
+    "Yesterday",
+    "April 24, 2021",
+    "April 17, 2021",
+    "March 25, 2021",
+  ];
 </script>
 
-<div class="class" />
-
 <style>
+  .lesson-date {
+    margin: 10px 10px 5px;
+    color: #171717;
+    font-size: 0.875rem;
+    font-weight: 400;
+  }
+  .class {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 0 40px;
+  }
+
+  .lecture {
+    border: 1px solid var(--border-color);
+    padding: 15px;
+    margin-bottom: 20px;
+    border-radius: 6px;
+  }
+
+  .lecture-title {
+    width: fit-content;
+    font-size: 18px;
+    color: var(--main-primary-color);
+  }
+
+  span {
+    color: #586069;
+    font-size: 12px;
+    width: 40px;
+  }
 </style>
+
+<div class="class">
+  {#each lectures as lecture, key}
+    <p class="lesson-date">{lecture}</p>
+    <div class="lecture">
+      <h4 class="lecture-title">
+        <a rel="prefetch" href="classes/1">Lecture {lectures.length - key}</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>

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>