Restructure app for scale and easy access of routeId

2021-07-12 05:55:57 +03:00
parent 4124a1fc02
commit 7e7bd28889
36 changed files with 707 additions and 620 deletions
@@ -0,0 +1,88 @@
+<script context="module">
+  export async function preload({ params }) {
+    let [courseId, courseNavItem, lessonId] = params.id;
+
+    return { courseId, courseNavItem, lessonId };
+  }
+</script>
+
+<script>
+  import { stores } from '@sapper/app';
+  import CourseContainer from '../../../components/CourseContainer/index.svelte';
+  import PageNav from '../../../components/PageNav/index.svelte';
+  import UserCard from '../../../components/UserCard/index.svelte';
+
+  const { page } = stores();
+
+  const teachers = [
+    {
+      name: 'Alexander Pokidin',
+      title: 'Senior Software Engineer',
+      avatar: 'https://i.pravatar.cc/150?img=1',
+
+      telegramLink: 'https://t.me/seed_of_abraham',
+      mailLink: 'mailto:[email protected]',
+    },
+    {
+      name: 'Andrey Filatov',
+      title: 'Fullstack Software Engineer',
+      avatar: 'https://i.pravatar.cc/150?img=2',
+
+      telegramLink: 'https://t.me/seed_of_abraham',
+      mailLink: 'mailto:[email protected]',
+    },
+    {
+      name: 'Sergey Semko',
+      title: 'Senior Software Engineer',
+      avatar: 'https://i.pravatar.cc/150?img=3',
+
+      telegramLink: 'https://t.me/seed_of_abraham',
+      mailLink: 'mailto:[email protected]',
+    },
+    {
+      name: 'Natalia Fedii',
+      title: 'Project Manager',
+      avatar: 'https://i.pravatar.cc/150?img=4',
+
+      telegramLink: 'https://t.me/seed_of_abraham',
+      mailLink: 'mailto:[email protected]',
+    },
+  ];
+  const students = [...teachers, ...teachers, ...teachers];
+  export let courseId;
+</script>
+
+<CourseContainer title="ReactJS" {courseId}>
+  <PageNav title="People" disableSticky={true} />
+  <div class="m-3">
+    <h3>
+      <a id="teachers" name="teachers" href="{$page.path}#teachers">Teachers</a>
+    </h3>
+    <div class="flex flex-wrap">
+      {#each teachers as teacher}
+        <UserCard
+          name={teacher.name}
+          avatarUrl={teacher.avatar}
+          title={teacher.title}
+          telegramLink={teacher.telegramLink}
+          mailLink={teacher.mailLink}
+        />
+      {/each}
+    </div>
+  </div>
+
+  <div class="m-3">
+    <h3>
+      <a id="students" name="students" href="{$page.path}#students">Students</a>
+    </h3>
+    <div class="flex flex-wrap">
+      {#each students as student}
+        <UserCard
+          name={student.name}
+          avatarUrl={student.avatar}
+          title={student.title}
+        />
+      {/each}
+    </div>
+  </div>
+</CourseContainer>