Add classes list page

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 />

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>

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 = "";

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>

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>

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>