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>

src/routes/_layout.svelte

@@ -8,18 +8,6 @@
   export let segment;
 </script>
 
-<Tailwindcss />
-
-<!-- <Nav {segment} /> -->
-
-<main class="flex max-w-screen-xl">
-  <LeftNav {segment} />
-  <slot />
-  <SideBar />
-</main>
-
-<Footer />
-
 <style>
   main {
     background-color: white;
@@ -37,3 +25,15 @@
     --border-color: #eaecef;
   }
 </style>
+
+<Tailwindcss />
+
+<!-- <Nav {segment} /> -->
+
+<main class="flex max-w-screen-xl">
+  <LeftNav {segment} />
+  <slot />
+  <SideBar />
+</main>
+
+<Footer />

src/routes/classes/[id].svelte

@@ -0,0 +1,31 @@
+<script>
+  import { stores } from "@sapper/app";
+  import PageNav from "../../components/PageNav/index.svelte";
+  import Class from "../../components/Classes/Class.svelte";
+
+  const { page } = stores();
+  const path = $page.path;
+  let tab = "";
+
+  $: tab = $page.query.tab || "lectures";
+</script>
+
+<style>
+  .root {
+    min-width: 600px;
+    margin: 0 auto;
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+  }
+</style>
+
+<svelte:head>
+  <title>QA Automation</title>
+</svelte:head>
+
+<div class="root">
+  <PageNav
+    title="QA Automation"
+    navItems={[{ label: 'Lectures', isActive: tab === 'lectures', href: `${path}?tab=lectures` }, { label: 'Class work', isActive: tab === 'classwork', href: `${path}?tab=classwork` }, { label: 'Hometasks', isActive: tab === 'hometasks', href: `${path}?tab=hometasks` }]} />
+  <Class />
+</div>

src/routes/classes[id].svelte

@@ -0,0 +1,32 @@
+<script>
+  import { stores } from "@sapper/app";
+  import PageNav from "../components/PageNav/index.svelte";
+  import Class from "../components/Classes/Class.svelte";
+
+  const { page } = stores();
+  let path = "";
+  let discussions = [];
+
+  $: path = $page.path || "lectures";
+  console.log($page.path);
+</script>
+
+<style>
+  .root {
+    min-width: 600px;
+    margin: 0 auto;
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+  }
+</style>
+
+<svelte:head>
+  <title>QA Automation</title>
+</svelte:head>
+
+<div class="root">
+  <PageNav
+    title="QA Automation"
+    navItems={[{ label: 'Lectures', isActive: path.includes('lectures'), href: `${path}lectures` }, { label: 'Class work', isActive: path.includes('classwork'), href: `${path}classwork` }, { label: 'Hometasks', isActive: path.includes('hometasks'), href: `${path}hometasks` }]} />
+  <Class />
+</div>