From 5268d10ba6e6ff8681164c4b2ef10d7300568403 Mon Sep 17 00:00:00 2001
From: Ibitoye Rotimi Best <best.rotimi@ikizmet.com>
Date: Thu, 6 May 2021 08:22:25 +0300
Subject: [PATCH] Add classes list page

---
 src/components/Classes/Class.svelte |  8 +++
 src/components/Classes/index.svelte | 48 +++++++++++++++++
 src/components/LeftNav/index.svelte | 24 ++++-----
 src/components/Nav/index.svelte     |  2 +-
 src/components/PageNav/index.svelte | 57 ++++++++++++++++++++
 src/routes/_layout.svelte           | 28 +++++-----
 src/routes/classes.svelte           | 28 ++++++++++
 src/routes/discussion/[id].svelte   |  6 +--
 src/routes/index.svelte             | 80 +++++++++--------------------
 src/routes/profile.svelte           | 50 +++++++++---------
 src/routes/timetable.svelte         | 60 +++++++++++-----------
 11 files changed, 254 insertions(+), 137 deletions(-)
 create mode 100644 src/components/Classes/Class.svelte
 create mode 100644 src/components/Classes/index.svelte
 create mode 100644 src/components/PageNav/index.svelte
 create mode 100644 src/routes/classes.svelte

diff --git a/src/components/Classes/Class.svelte b/src/components/Classes/Class.svelte
new file mode 100644
index 00000000..dea6019e
--- /dev/null
+++ b/src/components/Classes/Class.svelte
@@ -0,0 +1,8 @@
+<script>
+  export let classData = {};
+</script>
+
+<div class="class" />
+
+<style>
+</style>
diff --git a/src/components/Classes/index.svelte b/src/components/Classes/index.svelte
new file mode 100644
index 00000000..93187bf2
--- /dev/null
+++ b/src/components/Classes/index.svelte
@@ -0,0 +1,48 @@
+<script>
+  import Education16 from "carbon-icons-svelte/lib/Education16";
+  import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
+
+  export let classes = [1, 2, 3, 4, 5, 6, 7];
+</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;
+    margin: 0 auto;
+    padding: 0 40px;
+  }
+
+  .class {
+    border-bottom: 1px solid var(--border-color);
+    padding: 5px 0 10px;
+  }
+
+  .class-title {
+    width: fit-content;
+    font-size: 18px;
+  }
+
+  span {
+    color: #586069;
+    font-size: 12px;
+    width: 40px;
+  }
+</style>
diff --git a/src/components/LeftNav/index.svelte b/src/components/LeftNav/index.svelte
index 3065b37b..90e671bb 100644
--- a/src/components/LeftNav/index.svelte
+++ b/src/components/LeftNav/index.svelte
@@ -1,6 +1,6 @@
 <script>
   import NewQuestion from "../NewQuestion/index.svelte";
-  import Home32 from "carbon-icons-svelte/lib/Home32";
+  import Forum32 from "carbon-icons-svelte/lib/Forum32";
   import SendAlt32 from "carbon-icons-svelte/lib/SendAlt32";
   import UserAvatar32 from "carbon-icons-svelte/lib/UserAvatar32";
   import Calendar32 from "carbon-icons-svelte/lib/Calendar32";
@@ -23,13 +23,21 @@
         /></a
       >
     </div>
+    <li>
+      <a
+        class="block"
+        aria-current={segment === "classes" ? "page" : undefined}
+        href="classes"
+        ><Calendar32 class="carbon-icon" /> <span>Classes</span></a
+      >
+    </li>
     <li>
       <a
         class="block"
         aria-current={segment === undefined || segment === "discussion"
           ? "page"
           : undefined}
-        href="."><Home32 class="carbon-icon" /><span>Home</span></a
+        href="."><Forum32 class="carbon-icon" /><span>Discussion</span></a
       >
     </li>
     <li>
@@ -40,14 +48,6 @@
         ><UserAvatar32 class="carbon-icon" /> <span>Профиль</span></a
       >
     </li>
-    <li>
-      <a
-        class="block"
-        aria-current={segment === "timetable" ? "page" : undefined}
-        href="timetable"
-        ><Calendar32 class="carbon-icon" /> <span>Расписание</span></a
-      >
-    </li>
     <li>
       <a
         class="flex items-center"
@@ -115,11 +115,11 @@
   }
 
   [aria-current] :global(svg.carbon-icon) {
-    fill: #3182ce;
+    fill: var(--main-primary-color);
   }
 
   [aria-current] {
-    color: #3182ce;
+    color: var(--main-primary-color);
   }
 
   @media only screen and (max-width: 1002px) {
diff --git a/src/components/Nav/index.svelte b/src/components/Nav/index.svelte
index d39895ee..098fb34c 100644
--- a/src/components/Nav/index.svelte
+++ b/src/components/Nav/index.svelte
@@ -90,7 +90,7 @@
     content: "";
     width: calc(100% - 1em);
     height: 2px;
-    background-color: #3182ce;
+    background-color: var(--main-primary-color);
     display: block;
     bottom: -1px;
   }
diff --git a/src/components/PageNav/index.svelte b/src/components/PageNav/index.svelte
new file mode 100644
index 00000000..8c327ba5
--- /dev/null
+++ b/src/components/PageNav/index.svelte
@@ -0,0 +1,57 @@
+<script>
+  export let title = "";
+  export let navItems = [];
+</script>
+
+<div class="header flex justify-between mb-2">
+  <h4 class="title">{title}</h4>
+  {#if Array.isArray(navItems) && navItems.length}
+    <div class="flex justify-evenly items-center">
+      {#each navItems as item}
+        <a class="mr-5 text-sm {item.isActive && 'active'}" href={item.href}>
+          {item.label}
+        </a>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .header {
+    border-bottom: 1px solid var(--border-color);
+    padding: 15px;
+  }
+
+  .title {
+    font-size: 20px;
+  }
+
+  h4 {
+    font-size: 16px;
+    font-weight: 900;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    margin: 0;
+  }
+
+  .active {
+    position: relative;
+    display: inline-block;
+  }
+
+  .active::after {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 3px;
+    background-color: var(--main-primary-color);
+    display: block;
+  }
+
+  @media only screen and (max-width: 1002px) {
+    .header {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+</style>
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index f355228f..182a342e 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -8,6 +8,18 @@
   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;
@@ -20,16 +32,8 @@
   :global(a:hover) {
     text-decoration: underline;
   }
+  :global(:root) {
+    --main-primary-color: #3182ce;
+    --border-color: #eaecef;
+  }
 </style>
-
-<Tailwindcss />
-
-<!-- <Nav {segment} /> -->
-
-<main class="flex max-w-screen-xl">
-  <LeftNav {segment} />
-  <slot />
-  <SideBar />
-</main>
-
-<Footer />
diff --git a/src/routes/classes.svelte b/src/routes/classes.svelte
new file mode 100644
index 00000000..0f206d78
--- /dev/null
+++ b/src/routes/classes.svelte
@@ -0,0 +1,28 @@
+<script>
+  import PageNav from "../components/PageNav/index.svelte";
+  import Classes from "../components/Classes/index.svelte";
+  import { stores } from "@sapper/app";
+
+  const { page } = stores();
+  let tab = "";
+
+  $: tab = $page.query.tab || "mine";
+</script>
+
+<svelte:head>
+  <title>Classes</title>
+</svelte:head>
+
+<div class="root">
+  <PageNav title="Classes" />
+  <Classes />
+</div>
+
+<style>
+  .root {
+    min-width: 600px;
+    margin: 0 auto;
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
+  }
+</style>
diff --git a/src/routes/discussion/[id].svelte b/src/routes/discussion/[id].svelte
index 3d171ba5..f899a986 100644
--- a/src/routes/discussion/[id].svelte
+++ b/src/routes/discussion/[id].svelte
@@ -1,8 +1,8 @@
 <script context="module">
   import marked from "marked";
-  import Vote from "../../components/Vote.svelte";
-  import HashTags from "../../components/HashTags.svelte";
-  import TextEditor from "../../components/TextEditor.svelte";
+  import Vote from "../../components/Vote/index.svelte";
+  import HashTags from "../../components/HashTags/index.svelte";
+  import TextEditor from "../../components/TextEditor/index.svelte";
   import CheckmarkOutline20 from "carbon-icons-svelte/lib/CheckmarkOutline20";
 
   let userComment = "";
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 99d52f0b..1f4987bf 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -4,6 +4,7 @@
   import Vote from "../components/Vote/index.svelte";
   import Space from "../components/Space/index.svelte";
   import HashTags from "../components/HashTags/index.svelte";
+  import PageNav from "../components/PageNav/index.svelte";
 
   function getDiscussion(filterBy, allDiscussions) {
     switch (filterBy) {
@@ -150,29 +151,26 @@
   <title>Unidiscuss - Help students in your university</title>
 </svelte:head>
 <div class="root md:w-3/4 mx-auto md:mb-20">
-  <div class="header flex justify-between mb-2">
-    <h4 class="title">Разговоры 😉😁</h4>
-    <div class="flex justify-evenly items-center">
-      <a
-        class="mr-5 text-sm {filterBy === 'popular' && 'active'}"
-        href="?filter=popular"
-      >
-        Popular
-      </a>
-      <a
-        class="mr-5 text-sm {filterBy === 'recent' && 'active'}"
-        href="?filter=recent"
-      >
-        Recent
-      </a>
-      <a
-        class="mr-5 text-sm {filterBy === 'upvoted' && 'active'}"
-        href="?filter=upvoted"
-      >
-        Upvoted
-      </a>
-    </div>
-  </div>
+  <PageNav
+    title="Разговоры 😉😁"
+    navItems={[
+      {
+        label: "Popular",
+        isActive: filterBy === "popular",
+        href: "?filter=popular",
+      },
+      {
+        label: "Recent",
+        isActive: filterBy === "recent",
+        href: "?filter=recent",
+      },
+      {
+        label: "Upvoted",
+        isActive: filterBy === "upvoted",
+        href: "?filter=upvoted",
+      },
+    ]}
+  />
   {#each discussions as discussion}
     <div class="discussion-box">
       <Vote value={discussion.votes} />
@@ -198,20 +196,11 @@
   .root {
     max-width: 600px;
     margin: 0 auto;
-    border-left: 1px solid #eaecef;
-    border-right: 1px solid #eaecef;
-  }
-
-  .root .header {
-    border-bottom: 1px solid #eaecef;
-    padding: 15px;
-  }
-
-  .root .title {
-    font-size: 20px;
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
   }
   .discussion-box {
-    /* border: 1px solid #eaecef; */
+    /* border: 1px solid var(--border-color); */
     display: flex;
     align-items: flex-start;
     padding: 10px 15px;
@@ -235,25 +224,4 @@
     color: #586069;
     font-size: 12px;
   }
-
-  .active {
-    position: relative;
-    display: inline-block;
-  }
-
-  .active::after {
-    position: absolute;
-    content: "";
-    width: 100%;
-    height: 3px;
-    background-color: #3182ce;
-    display: block;
-  }
-
-  @media only screen and (max-width: 1002px) {
-    .header {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  }
 </style>
diff --git a/src/routes/profile.svelte b/src/routes/profile.svelte
index c31f33a2..81feb5e3 100644
--- a/src/routes/profile.svelte
+++ b/src/routes/profile.svelte
@@ -2,12 +2,36 @@
   let photos = [];
 </script>
 
+<svelte:head>
+  <title>Profile</title>
+</svelte:head>
+
+<div class="root">
+  <figure>
+    <img
+      src="https://pbs.twimg.com/media/EzHwj4wVgAEVbUY?format=jpg&name=4096x4096"
+      alt="Elon musk"
+    />
+    <figcaption>Elon musk</figcaption>
+  </figure>
+  <p>
+    NASA has selected Starship to land the first astronauts on the lunar surface
+    since the Apollo program! We are humbled to help @NASAArtemis usher in a new
+    era of human space exploration → http://go.nasa.gov/3tur510
+  </p>
+  <button
+    class="bg-blue-700 hover:bg-blue-900 text-white font-bold py-1 px-3 rounded"
+  >
+    Connect
+  </button>
+</div>
+
 <style>
   .root {
     max-width: 600px;
     margin: 20px auto;
-    border-left: 1px solid #eaecef;
-    border-right: 1px solid #eaecef;
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
     text-align: center;
     padding: 5px;
   }
@@ -22,25 +46,3 @@
     border-radius: 50%;
   }
 </style>
-
-<svelte:head>
-  <title>Profile</title>
-</svelte:head>
-
-<div class="root">
-  <figure>
-    <img
-      src="https://pbs.twimg.com/media/EzHwj4wVgAEVbUY?format=jpg&name=4096x4096"
-      alt="Elon musk" />
-    <figcaption>Elon musk</figcaption>
-  </figure>
-  <p>
-    NASA has selected Starship to land the first astronauts on the lunar surface
-    since the Apollo program! We are humbled to help @NASAArtemis usher in a new
-    era of human space exploration → http://go.nasa.gov/3tur510
-  </p>
-  <button
-    class="bg-blue-700 hover:bg-blue-900 text-white font-bold py-1 px-3 rounded">
-    Connect
-  </button>
-</div>
diff --git a/src/routes/timetable.svelte b/src/routes/timetable.svelte
index 92726b8d..a5cb12af 100644
--- a/src/routes/timetable.svelte
+++ b/src/routes/timetable.svelte
@@ -8,14 +8,41 @@
   $: tab = $page.query.tab || "mine";
 </script>
 
+<svelte:head>
+  <title>Расписание</title>
+</svelte:head>
+
+<div class="root">
+  <div class="header flex justify-between mb-2">
+    <h4 class="title">Расписание</h4>
+    <div class="flex justify-evenly items-center">
+      <a
+        class="mr-5 text-sm {tab === 'mine' && 'active'}"
+        href="/timetable?tab=mine"
+      >
+        Мои
+      </a>
+      <a
+        class="mr-5 text-sm {tab === 'saved' && 'active'}"
+        href="/timetable?tab=saved"
+      >
+        Сохранение
+      </a>
+    </div>
+  </div>
+  <TimeTable />
+  <TimeTable />
+  <TimeTable />
+</div>
+
 <style>
   .root {
     margin: 0 auto;
-    border-left: 1px solid #eaecef;
-    border-right: 1px solid #eaecef;
+    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
   }
   .root .header {
-    border-bottom: 1px solid #eaecef;
+    border-bottom: 1px solid var(--border-color);
     padding: 15px;
   }
 
@@ -29,32 +56,7 @@
     content: "";
     width: 100%;
     height: 3px;
-    background-color: #3182ce;
+    background-color: var(--main-primary-color);
     display: block;
   }
 </style>
-
-<svelte:head>
-  <title>Расписание</title>
-</svelte:head>
-
-<div class="root">
-  <div class="header flex justify-between mb-2">
-    <h4 class="title">Расписание</h4>
-    <div class="flex justify-evenly items-center">
-      <a
-        class="mr-5 text-sm {tab === 'mine' && 'active'}"
-        href="/timetable?tab=mine">
-        Мои
-      </a>
-      <a
-        class="mr-5 text-sm {tab === 'saved' && 'active'}"
-        href="/timetable?tab=saved">
-        Сохранение
-      </a>
-    </div>
-  </div>
-  <TimeTable />
-  <TimeTable />
-  <TimeTable />
-</div>