Add mode functionality + create form component

rollup.config.js

@@ -28,7 +28,8 @@ export default {
     plugins: [
       replace({
         "process.browser": true,
-        "process.env.NODE_ENV": JSON.stringify(mode)
+        "process.env.NODE_ENV": JSON.stringify(mode),
+        preventAssignment: true
       }),
       svelte({
         preprocess,
@@ -82,7 +83,8 @@ export default {
     plugins: [
       replace({
         "process.browser": false,
-        "process.env.NODE_ENV": JSON.stringify(mode)
+        "process.env.NODE_ENV": JSON.stringify(mode),
+        preventAssignment: true
       }),
       svelte({
         preprocess,

src/components/Course/components/Lecture/Homework.svelte

@@ -117,6 +117,8 @@
   }
 </script>
 
+<div class="bg-gray-100 rounded-xl p-8" />
+
 {#if currentQuestionIndex === 0}
   <div>
     <h2>Home task 1</h2>

src/components/Course/components/Lecture/Readme/EditMode.svelte

@@ -1,94 +1,8 @@
 <script>
-  import marked from "marked";
+  import EditContent from "../../../../EditContent/index.svelte";
-  import PrimaryButton from "../../../../PrimaryButton/index.svelte";
   import readme from "../../readme.js";
 
-  let isWriteMode = true;
+  let value = readme;
-  export let value = readme;
-  export let placeholder = ``;
-  const activeClassName = "border-b-2 border-blue-700";
-
-  const handleTabClick = (tab) => (event) => {
-    isWriteMode = tab === 1;
-  };
 </script>
 
-<div class="root">
+<EditContent {value} placeholder="Start typing your lesson" />
-  <div class="flex justify-center">
-    <button
-      on:click={handleTabClick(1)}
-      class="focus:outline-none p-2 {isWriteMode && `${activeClassName}`}"
-    >
-      Write
-    </button>
-    <button
-      on:click={handleTabClick(2)}
-      class="focus:outline-none p-2 {!isWriteMode && `${activeClassName}`}"
-    >
-      Preview
-    </button>
-  </div>
-
-  <div class="m-2 mb-0 p-0">
-    {#if isWriteMode}
-      <textarea
-        bind:value
-        {placeholder}
-        class="border border-gray rounded-md p-2"
-      />
-    {:else}
-      <article class="preview prose prose-sm sm:prose p-2">
-        {@html marked(value)}
-      </article>
-    {/if}
-  </div>
-  {#if !isWriteMode}
-    <hr />
-  {/if}
-  <div class="flex justify-between items-center px-2 pb-1">
-    <div class="flex items-center text-sm">
-      <svg
-        class="octicon mr-2"
-        height="16"
-        viewBox="0 0 16 16"
-        version="1.1"
-        width="16"
-        aria-hidden="true"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"
-        />
-      </svg>
-      <span>Styling with Markdown is supported</span>
-    </div>
-
-    <PrimaryButton label="Answer" />
-  </div>
-</div>
-
-<!-- {@html marked(readme, {
-  breaks: true,
-  gfm: true,
-})} -->
-<style>
-  .root {
-    width: 100%;
-    min-height: 200px;
-  }
-
-  textarea {
-    width: 100%;
-    height: 500px;
-  }
-
-  .preview {
-    min-height: 150px;
-  }
-
-  .octicon {
-    display: inline-block;
-    vertical-align: text-top;
-    fill: currentColor;
-  }
-</style>

src/components/Course/components/Lecture/Readme/ViewMode.svelte

@@ -1,6 +1,5 @@
 <script>
   import marked from "marked";
-  import PageNav from "../../PageNav/index.svelte";
 
   const readme = `
 # Introduction
@@ -15,15 +14,4 @@
 `;
 </script>
 
-<PageNav title="Overview" disableSticky={true} />
+{@html marked(readme, { breaks: true, gfm: true })}
-
-<div class="body">
-  {@html marked(readme, { breaks: true, gfm: true })}
-</div>
-
-<style>
-  .body {
-    max-width: 1000px;
-    margin: 10px;
-  }
-</style>

src/components/Course/components/Lecture/Readme/index.svelte

@@ -0,0 +1,14 @@
+<script>
+  import MODES from "../../../../../utils/constants/mode.js";
+  import EditMode from "./EditMode.svelte";
+  import ViewMode from "./ViewMode.svelte";
+
+  export let mode = "";
+  $: console.log("mode", mode);
+</script>
+
+{#if mode === MODES.edit}
+  <EditMode />
+{:else}
+  <ViewMode />
+{/if}

src/components/Course/components/Lecture/index.svelte

@@ -2,14 +2,23 @@
   import PageNav from "../../../PageNav/index.svelte";
   import Classwork from "./Classwork.svelte";
   import Homework from "./Homework.svelte";
-  // import Readme from "./Readme.svelte";
+  import Readme from "./Readme/index.svelte";
-  import ReadmeInEditMode from "./Readme/EditMode.svelte";
+  import PrimaryContainedButton from "../../../PrimaryContainedButton/index.svelte";
-  import Switcher from "../../../Switcher/index.svelte";
+
+  import MODES from "../../../../utils/constants/mode.js";
 
   export let path;
   export let tab;
+  export let mode;
 
-  $: console.log("path", path);
+  let modeLabel = "Edit";
+
+  $: modeLabel = mode === MODES.edit ? "Save" : "Edit";
+
+  function handleModeChange(e) {
+    e.preventDefault();
+    mode = mode === MODES.edit ? MODES.view : MODES.edit;
+  }
 </script>
 
 <div>
@@ -33,13 +42,16 @@
     ]}
   >
     <div slot="widget">
-      <Switcher />
+      <PrimaryContainedButton
+        label={modeLabel}
+        handleClick={handleModeChange}
+      />
     </div>
   </PageNav>
 
   <div class="course">
     {#if tab === "lectures"}
-      <ReadmeInEditMode />
+      <Readme {mode} />
     {:else if tab === "classwork"}
       <Classwork />
     {:else if tab === "hometasks"}

src/components/Course/components/readme.js

@@ -3,26 +3,6 @@ export default `# 1. Soft Skills
 ## Notes
 Here I can write some notes to my students
 
-## Slide
-<iframe
-  title="Lecture"
-  src="https://docs.google.com/presentation/d/e/2PACX-1vTi_ATSrNBL-FMP7oDSi2DtXU7L8yzL0KAocNc-k7EqXaMM-oCbnbVmQjHYP0QKAw3r-QZayNfx5EpM/embed?start=false&loop=false&delayms=3000"
-  frameborder="0"
-  width="100%"
-  height="569"
-  allowfullscreen="true"
-  mozallowfullscreen="true"
-  webkitallowfullscreen="true"></iframe>
-
-## Video
-<iframe
-  width="100%"
-  height="315"
-  src="https://www.youtube.com/embed/8pLZkbN9h_s"
-  title="YouTube video player"
-  frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-  webkitallowfullscreen="true"></iframe>
-
 ## Community
 
 The Next.js community can be found on [GitHub Discussions](https://github.com/vercel/next.js/discussions), where you can ask questions, voice ideas, and share your projects.
@@ -43,5 +23,4 @@ Please see our [contributing.md](/contributing.md).
 - Arunoda Susiripala ([@arunoda](https://twitter.com/arunoda))
 - Tony Kovanen ([@tonykovanen](https://twitter.com/tonykovanen))
 - Dan Zajdband ([@impronunciable](https://twitter.com/impronunciable))
-
 `

src/components/EditContent/index.svelte

@@ -0,0 +1,130 @@
+<script>
+  import marked from "marked";
+  import PrimaryButton from "../PrimaryButton/index.svelte";
+
+  let isWriteMode = true;
+  export let value;
+  export let placeholder = ``;
+  const activeClassName = "border-b-2 border-blue-700";
+
+  const handleTabClick = (tab) => () => {
+    isWriteMode = tab === 1;
+  };
+</script>
+
+<div class="root">
+  <div class="flex justify-center">
+    <button
+      on:click={handleTabClick(1)}
+      class="focus:outline-none p-2 {isWriteMode && `${activeClassName}`}"
+    >
+      Write
+    </button>
+    <button
+      on:click={handleTabClick(2)}
+      class="focus:outline-none p-2 {!isWriteMode && `${activeClassName}`}"
+    >
+      Preview
+    </button>
+  </div>
+  <div class="block">
+    <span class="text-gray-700">Radio Buttons</span>
+    <div class="mt-2">
+      <div>
+        <label class="inline-flex items-center">
+          <input
+            class="form-radio"
+            type="radio"
+            checked
+            name="radio-direct"
+            value="1"
+          />
+          <span class="ml-2">Option 1</span>
+        </label>
+      </div>
+      <div>
+        <label class="inline-flex items-center">
+          <input
+            class="form-radio"
+            type="radio"
+            name="radio-direct"
+            value="2"
+          />
+          <span class="ml-2">Option 2</span>
+        </label>
+      </div>
+      <div>
+        <label class="inline-flex items-center">
+          <input
+            class="form-radio"
+            type="radio"
+            name="radio-direct"
+            value="3"
+          />
+          <span class="ml-2">Option 3</span>
+        </label>
+      </div>
+    </div>
+  </div>
+
+  <div class="m-2 mb-0 p-0">
+    {#if isWriteMode}
+      <textarea
+        bind:value
+        {placeholder}
+        class="border border-gray rounded-md p-2"
+      />
+    {:else}
+      <article class="preview prose prose-sm sm:prose p-2">
+        {@html marked(value)}
+      </article>
+    {/if}
+  </div>
+  {#if !isWriteMode}
+    <hr />
+  {/if}
+  <div class="flex justify-between items-center px-2 pb-1">
+    <div class="flex items-center text-sm">
+      <svg
+        class="octicon mr-2"
+        height="16"
+        viewBox="0 0 16 16"
+        version="1.1"
+        width="16"
+        aria-hidden="true"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"
+        />
+      </svg>
+      <span>Styling with Markdown is supported</span>
+    </div>
+  </div>
+</div>
+
+<!-- {@html marked(readme, {
+  breaks: true,
+  gfm: true,
+})} -->
+<style>
+  .root {
+    width: 100%;
+    min-height: 200px;
+  }
+
+  textarea {
+    width: 100%;
+    height: 500px;
+  }
+
+  .preview {
+    min-height: 150px;
+  }
+
+  .octicon {
+    display: inline-block;
+    vertical-align: text-top;
+    fill: currentColor;
+  }
+</style>

src/components/Form/Checkbox.svelte

@@ -0,0 +1,17 @@
+<script>
+  export let label;
+  export let value;
+  export let checked;
+  export let name;
+</script>
+
+<label class="inline-flex items-center">
+  <input
+    type="checkbox"
+    class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50"
+    {name}
+    {value}
+    bind:checked
+  />
+  <span class="ml-2">{label}</span>
+</label>

src/components/Form/Date.svelte

@@ -0,0 +1,15 @@
+<script>
+  export let label;
+  export let placeholder;
+  export let value;
+</script>
+
+<label class="block">
+  <span class="text-gray-700">{label}</span>
+  <input
+    bind:value
+    {placeholder}
+    type="date"
+    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+  />
+</label>

src/components/Form/RadioItem.svelte

@@ -0,0 +1,11 @@
+<script>
+  export let label;
+  export let value;
+  export let checked;
+  export let name;
+</script>
+
+<label class="inline-flex items-center">
+  <input class="form-radio" type="radio" {checked} {name} {value} />
+  <span class="ml-2">{label}</span>
+</label>

src/components/Form/Select.svelte

@@ -0,0 +1,19 @@
+<script>
+  export let label;
+  export let placeholder;
+  export let value;
+  export let options = [];
+
+  let answer = "Work on ";
+</script>
+
+<label class="block">
+  <span class="text-gray-700">{label}</span>
+  <select bind:value class="form-select block w-full mt-1">
+    {#each options as option}
+      <option value={option.id}>
+        {option.text}
+      </option>
+    {/each}
+  </select>
+</label>

src/components/Form/TextArea.svelte

@@ -0,0 +1,15 @@
+<script>
+  export let label;
+  export let placeholder;
+  export let value;
+</script>
+
+<label class="block">
+  <span class="text-gray-700">{label}</span>
+  <textarea
+    class="form-textarea mt-1 block w-full h-24"
+    rows="3"
+    {placeholder}
+    bind:value
+  />
+</label>

src/components/Form/TextField.svelte

@@ -0,0 +1,15 @@
+<script>
+  export let label;
+  export let placeholder;
+  export let value;
+</script>
+
+<label class="block">
+  <span class="text-gray-700">{label}</span>
+  <input
+    class="form-input mt-1 block w-full"
+    type="text"
+    {placeholder}
+    bind:value
+  />
+</label>

src/components/NewButton/index.svelte

@@ -1,30 +0,0 @@
-<script>
-  import AddAlt32 from "carbon-icons-svelte/lib/AddAlt32";
-  export let href;
-  export let label = "";
-</script>
-
-<a
-  class="root bg-blue-700 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded inline-flex items-center float-right"
-  {href}
->
-  <AddAlt32 class="carbon-icon fill-current w-4 h-4 mr-1" />
-  {label}
-</a>
-
-<style>
-  .root {
-    height: fit-content;
-    border-radius: 30px;
-  }
-
-  @media only screen and (max-width: 1002px) {
-    a {
-      padding: 10px 15px;
-    }
-
-    a :global(svg.carbon-icon) {
-      margin-right: 0;
-    }
-  }
-</style>

src/components/PageNav/index.svelte

@@ -1,5 +1,5 @@
 <script>
-  import NewButton from "../NewButton/index.svelte";
+  import NewButton from "../PrimaryContainedButton/index.svelte";
   export let title = "";
   export let navItems = [];
   export let addButtonHref;
@@ -11,7 +11,10 @@
     Array.isArray(navItems) && navItems.length > 4 ? "bring-down" : "";
 </script>
 
-<div class="header flex items-center justify-between mb-2 {!disableSticky && 'sticky'} {dynamicRootClass}">
+<div
+  class="header flex items-center justify-between mb-2 {!disableSticky &&
+    'sticky'} {dynamicRootClass}"
+>
   {#if !!title}
     <h4 class="title">{title}</h4>
   {/if}
@@ -27,6 +30,7 @@
       {/if}
     </div>
   {/if}
+  <slot name="widget" />
 </div>
 
 <style>
@@ -72,6 +76,9 @@
     flex-direction: column;
     align-items: flex-start;
   }
+  .spacing {
+    flex-grow: 1;
+  }
 
   @media only screen and (max-width: 1002px) {
     .header {

src/components/PrimaryContainedButton/index.svelte

@@ -0,0 +1,37 @@
+<script>
+  // import AddAlt32 from "carbon-icons-svelte/lib/AddAlt32";
+  export let href = "";
+  export let label = "";
+  export let handleClick;
+</script>
+
+<a
+  class="root bg-blue-700 hover:bg-blue-900 text-white font-bold rounded inline-flex items-center float-right"
+  {href}
+  on:click={handleClick}
+>
+  <!-- <AddAlt32 class="carbon-icon fill-current w-4 h-4 mr-1" /> -->
+  {label}
+</a>
+
+<style lang="scss">
+  .root {
+    height: fit-content;
+    border-radius: 5px;
+    padding: 4px 20px;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  @media only screen and (max-width: 1002px) {
+    a {
+      padding: 10px 15px;
+    }
+
+    a :global(svg.carbon-icon) {
+      margin-right: 0;
+    }
+  }
+</style>

src/components/RadioQuestion/index.svelte

@@ -1,5 +1,6 @@
 <script>
   import PrimaryButton from "../PrimaryButton/index.svelte";
+  import RadioItem from "../Form/RadioItem.svelte";
 
   export let title = "";
   export let name = "";
@@ -24,7 +25,6 @@
   }
 
   function handleFormSubmit(event) {
-    event.preventDefault();
     const value = getRadioVal(event.target, name);
     onSubmit(name, value);
     event.target.reset();
@@ -36,19 +36,18 @@
   }
 </script>
 
-<form on:submit={handleFormSubmit}>
+<form on:submit|preventDefault={handleFormSubmit}>
   <h2>{title}</h2>
 
   <div class="ml-4">
     {#each options as option}
       <div>
-        <input
+        <RadioItem
-          type="radio"
           {name}
           value={option.value}
           checked={option.value === defaultValue}
+          label={option.label}
         />
-        <label for={option.value}>{option.label}</label>
       </div>
     {/each}
   </div>

src/components/Switcher/index.svelte

@@ -1,182 +0,0 @@
-<script>
-  export let checked = false;
-
-  function onChange() {
-    checked = !checked;
-  }
-</script>
-
-<div class="neumorphism-toggle">
-  <input type="checkbox" id="neumorphism" {checked} {onChange} />
-  <label for="neumorphism">
-    <div class="switch">
-      <div class="dot" />
-    </div>
-    <span>Neumorphism</span>
-  </label>
-  <span>... not allowed to toggle again :(</span>
-</div>
-
-<style lang="scss">
-  .neumorphism-toggle {
-    position: relative;
-    transition: transform 0.3s;
-    transform: scale(var(--scale, 1)) translateZ(0);
-    &:active {
-      --scale: 0.96;
-    }
-    input {
-      display: none;
-      & + label {
-        background: #fff;
-        border-radius: 9px;
-        padding: 16px 0 16px 20px;
-        min-width: 208px;
-        display: block;
-        cursor: pointer;
-        position: relative;
-        box-shadow: -12px -12px 24px var(--light-shadow, transparent),
-          12px 12px 24px var(--shadow, transparent);
-        transition: box-shadow 0.4s;
-        &:before {
-          content: "";
-          position: absolute;
-          left: 0;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          border-radius: inherit;
-          background: linear-gradient(160deg, #f1f4ff, #f9faff);
-          opacity: var(--gradient, 0);
-          transition: opacity 0.4s;
-        }
-        .switch {
-          position: relative;
-          display: inline-block;
-          z-index: 1;
-          vertical-align: top;
-          height: 22px;
-          width: 40px;
-          border-radius: 11px;
-          background: #eceffc;
-          &:before {
-            content: "";
-            position: absolute;
-            left: 0;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            border-radius: inherit;
-            background: linear-gradient(90deg, #4f97ff, #275efe);
-            opacity: var(--gradient, 0);
-            transition: opacity 0.4s;
-          }
-          .dot {
-            background: #d1d6ee;
-            position: absolute;
-            width: 24px;
-            height: 24px;
-            border-radius: 50%;
-            left: -1px;
-            top: -1px;
-            transform: translateX(var(--offset, 0));
-            transition: transform 0.4s, box-shadow 0.4s;
-            box-shadow: -4px -4px 8px var(--light-shadow-2, transparent),
-              4px 4px 8px var(--shadow, transparent);
-            &:before {
-              content: "";
-              position: absolute;
-              left: 0;
-              top: 0;
-              right: 0;
-              bottom: 0;
-              border-radius: inherit;
-              background: linear-gradient(160deg, #f1f4ff, #f9faff);
-              opacity: var(--gradient, 0);
-              transition: opacity 0.4s;
-            }
-          }
-        }
-        span {
-          line-height: 22px;
-          font-size: 16px;
-          color: var(--text, #646b8c);
-          font-weight: 500;
-          display: inline-block;
-          vertical-align: top;
-          z-index: 1;
-          position: relative;
-          margin-left: 12px;
-          transition: color 0.4s;
-        }
-        & + span {
-          text-align: center;
-          display: block;
-          position: absolute;
-          left: 0;
-          right: 0;
-          top: 100%;
-          opacity: 0;
-          font-size: 12px;
-          font-weight: 500;
-          color: #a6accd;
-          transform: translateY(4px);
-          transition: opacity 0.4s, transform 0.4s;
-        }
-      }
-      &:not(:checked) {
-        & + label {
-          pointer-events: none;
-          & + span {
-            opacity: 1;
-            transform: translateY(12px);
-          }
-        }
-      }
-      &:checked {
-        & + label {
-          --offset: 18px;
-          --text: #404660;
-          --gradient: 1;
-          --shadow: rgba(0, 6, 39, 0.1);
-          --light-shadow: rgba(255, 255, 255, 0.8);
-          --light-shadow-2: rgba(255, 255, 255, 0.1);
-        }
-      }
-    }
-  }
-
-  html {
-    box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-  }
-
-  * {
-    box-sizing: inherit;
-    &:before,
-    &:after {
-      box-sizing: inherit;
-    }
-  }
-
-  // dribbble & twitter
-  body {
-    min-height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-family: "Inter", "Inter UI", Arial;
-    background: #f6f8ff;
-    .twitter {
-      position: fixed;
-      display: block;
-      right: 16px;
-      bottom: 16px;
-      svg {
-        width: 32px;
-        height: 32px;
-        fill: #1da1f2;
-      }
-    }
-  }
-</style>

src/components/Tailwindcss.svelte

@@ -1,4 +1,4 @@
-<style global>
+<style global lang="scss">
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
@@ -14,6 +14,20 @@
     margin: 0.8em 0;
   }
 
+  .prose {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin-top: 0px !important;
+      margin-bottom: 16px !important;
+      font-weight: 600 !important;
+      line-height: 1.25 !important;
+    }
+  }
+
   code {
     white-space: pre-wrap;
   }

src/routes/_layout.svelte

@@ -2,7 +2,7 @@
   import Tailwindcss from "../components/Tailwindcss.svelte";
   // import Nav from "../components/Nav.svelte";
   import LeftNav from "../components/LeftNav/index.svelte";
-  import SideBar from "../components/SideBar/index.svelte";
+  // import SideBar from "../components/SideBar/index.svelte";
   import Footer from "../components/Footer/index.svelte";
 
   export let segment;

src/routes/courses/[...id].svelte

@@ -16,16 +16,41 @@
   import TimeTable from "../../components/Course/components/TimeTable.svelte";
   import CourseNav from "../../components/Course/components/CourseNav.svelte";
 
-  export let slug;
+  // export let slug;
   export let courseNavItem;
-  export let lectureId;
+  // export let lectureId;
 
   const { page } = stores();
   let tab = "";
+  let mode = "";
 
   $: tab = $page.query.tab || "lectures";
+  $: mode = $page.query.mode;
 </script>
 
+<svelte:head>
+  <title>ReactJS</title>
+</svelte:head>
+
+<div class="root">
+  <CourseNav />
+  <div class="rightBar">
+    {#if !courseNavItem}
+      <Overview />
+    {:else if courseNavItem === "score"}
+      <Scoreboard />
+    {:else if courseNavItem === "timetable"}
+      <TimeTable />
+    {:else if courseNavItem === "hometasks"}
+      <HomeTask />
+    {:else if courseNavItem === "lecture"}
+      <Lecture path={$page.path} {tab} {mode} />
+    {:else if courseNavItem === "people"}
+      <People />
+    {/if}
+  </div>
+</div>
+
 <style>
   .root {
     display: flex;
@@ -37,26 +62,3 @@
     width: 80%;
   }
 </style>
-
-<svelte:head>
-  <title>ReactJS</title>
-</svelte:head>
-
-<div class="root">
-  <CourseNav />
-  <div class="rightBar">
-    {#if !courseNavItem}
-      <Overview />
-    {:else if courseNavItem === 'score'}
-      <Scoreboard />
-    {:else if courseNavItem === 'timetable'}
-      <TimeTable />
-    {:else if courseNavItem === 'hometasks'}
-      <HomeTask />
-    {:else if courseNavItem === 'lecture'}
-      <Lecture path={$page.path} {tab} />
-    {:else if courseNavItem === 'people'}
-      <People />
-    {/if}
-  </div>
-</div>

src/utils/constants/mode.js

@@ -0,0 +1,4 @@
+export default {
+  edit: 'edit',
+  view: 'view',
+};