Add people page

src/components/Navigation/index.svelte

@@ -58,8 +58,8 @@
     <li>
       <a
         class="block"
-        aria-current={segment === 'profile' ? 'page' : undefined}
+        aria-current={segment === 'people' ? 'page' : undefined}
-        href="profile"
+        href="people"
         >People
       </a>
     </li>

src/routes/discussions.svelte

@@ -1,18 +1,18 @@
 <script>
-  import { stores } from "@sapper/app";
+  import { stores } from '@sapper/app';
-  import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
+  import AddComment20 from 'carbon-icons-svelte/lib/AddComment20';
-  import Vote from "../components/Vote/index.svelte";
+  import Vote from '../components/Vote/index.svelte';
-  import Space from "../components/Space/index.svelte";
+  import Space from '../components/Space/index.svelte';
-  import HashTags from "../components/HashTags/index.svelte";
+  import HashTags from '../components/HashTags/index.svelte';
-  import PageNav from "../components/PageNav/index.svelte";
+  import PageNav from '../components/PageNav/index.svelte';
 
   function getDiscussion(filterBy, allDiscussions) {
     switch (filterBy) {
-      case "popular":
+      // case 'popular':
-        return allDiscussions.filter((a, i) => i >= 0 && i < 2);
+      //   return allDiscussions.filter((a, i) => i >= 0 && i < 2);
-      case "recent":
+      case 'recent':
         return allDiscussions.filter((a, i) => i >= 2 && i < 5);
-      case "upvoted":
+      case 'upvoted':
         return allDiscussions.filter((a, i) => i > 4 && i < 8);
       default:
         return allDiscussions;
@@ -20,19 +20,19 @@
   }
 
   const { page } = stores();
-  let filterBy = "";
+  let filterBy = '';
   let discussions = [];
 
-  $: filterBy = $page.query.filter || "popular";
+  $: filterBy = $page.query.filter || 'popular';
 
   const _allDiscussions = [
     {
       id: 1,
-      title: "How do I pass Anicimov?",
+      title: 'How do I pass Anicimov?',
       author: {
-        name: "rotimibest",
+        name: 'rotimibest',
       },
-      tags: ["ибэит", "икс"],
+      tags: ['ибэит', 'икс'],
       answered: false,
       comments: 10,
       votes: 10,
@@ -40,43 +40,43 @@
     {
       id: 2,
       title:
-        "Where do I find the nearest restaurant. Where do I find the nearest restaurant?. Where do I find the nearest restaurant? Where do I find the nearest restaurant?",
+        'Where do I find the nearest restaurant. Where do I find the nearest restaurant?. Where do I find the nearest restaurant? Where do I find the nearest restaurant?',
       author: {
-        name: "attronaldo",
+        name: 'attronaldo',
       },
-      tags: ["иибрт", "иее"],
+      tags: ['иибрт', 'иее'],
       answered: false,
       comments: 2,
       votes: 2,
     },
     {
       id: 3,
-      title: "Who is Nikolenko?",
+      title: 'Who is Nikolenko?',
       author: {
-        name: "donald",
+        name: 'donald',
       },
-      tags: ["ибэит", "иее", "иибрт", "ИПИГ"],
+      tags: ['ибэит', 'иее', 'иибрт', 'ИПИГ'],
       answered: false,
       comments: 10,
       votes: 10,
     },
     {
       id: 4,
-      title: "Archive discussion button",
+      title: 'Archive discussion button',
       author: {
-        name: "acharlesvv",
+        name: 'acharlesvv',
       },
       tags: [
-        "ИЭКСУ",
+        'ИЭКСУ',
-        "ИМБТ",
+        'ИМБТ',
-        "ИМИ",
+        'ИМИ',
-        "ИПТДМ",
+        'ИПТДМ',
-        "ИИИР",
+        'ИИИР',
-        "ГФ",
+        'ГФ',
-        "ХТФ",
+        'ХТФ',
-        "ИДЗО",
+        'ИДЗО',
-        "УИИ",
+        'УИИ',
-        "УНИ",
+        'УНИ',
       ],
       answered: false,
       comments: 15,
@@ -84,54 +84,54 @@
     },
     {
       id: 1,
-      title: "How do I pass Anicimov?",
+      title: 'How do I pass Anicimov?',
       author: {
-        name: "rotimibest",
+        name: 'rotimibest',
       },
-      tags: ["ибэит", "икс"],
+      tags: ['ибэит', 'икс'],
       answered: false,
       comments: 7,
       votes: 7,
     },
     {
       id: 2,
-      title: "Where do I find the nearest restaurant?",
+      title: 'Where do I find the nearest restaurant?',
       author: {
-        name: "attronaldo",
+        name: 'attronaldo',
       },
-      tags: ["иибрт", "иее"],
+      tags: ['иибрт', 'иее'],
       answered: false,
       comments: 4,
       votes: 4,
     },
     {
       id: 3,
-      title: "Who is Nikolenko?",
+      title: 'Who is Nikolenko?',
       author: {
-        name: "donald",
+        name: 'donald',
       },
-      tags: ["ибэит", "иее", "иибрт", "ИПИГ"],
+      tags: ['ибэит', 'иее', 'иибрт', 'ИПИГ'],
       answered: false,
       comments: 100,
       votes: 100,
     },
     {
       id: 4,
-      title: "Archive discussion button",
+      title: 'Archive discussion button',
       author: {
-        name: "acharlesvv",
+        name: 'acharlesvv',
       },
       tags: [
-        "ИЭКСУ",
+        'ИЭКСУ',
-        "ИМБТ",
+        'ИМБТ',
-        "ИМИ",
+        'ИМИ',
-        "ИПТДМ",
+        'ИПТДМ',
-        "ИИИР",
+        'ИИИР',
-        "ГФ",
+        'ГФ',
-        "ХТФ",
+        'ХТФ',
-        "ИДЗО",
+        'ИДЗО',
-        "УИИ",
+        'УИИ',
-        "УНИ",
+        'УНИ',
       ],
       answered: false,
       comments: 5,
@@ -157,19 +157,19 @@
     addButtonLabel="Ask"
     navItems={[
       {
-        label: "Popular",
+        label: 'Popular',
-        isActive: filterBy === "popular",
+        isActive: filterBy === 'popular',
-        href: "?filter=popular",
+        href: '/discussions?filter=popular',
       },
       {
-        label: "Recent",
+        label: 'Recent',
-        isActive: filterBy === "recent",
+        isActive: filterBy === 'recent',
-        href: "?filter=recent",
+        href: '/discussions?filter=recent',
       },
       {
-        label: "Upvoted",
+        label: 'Upvoted',
-        isActive: filterBy === "upvoted",
+        isActive: filterBy === 'upvoted',
-        href: "?filter=upvoted",
+        href: '/discussions?filter=upvoted',
       },
     ]}
   />
@@ -178,7 +178,7 @@
       <Vote value={discussion.votes} />
       <div class="discussion-topic-author">
         <h4>
-          <a rel="prefetch" href="discussion/{discussion.id}"
+          <a rel="prefetch" href="discussions/{discussion.id}"
             >{discussion.title}</a
           >
         </h4>

src/routes/people.svelte

@@ -0,0 +1,92 @@
+<script>
+  import AddAlt32 from 'carbon-icons-svelte/lib/AddAlt32';
+  import IconButton from '../components/IconButton/index.svelte';
+  import Avatar from '../components/Avatar/index.svelte';
+  let teachers = [
+    {
+      avatar: 'https://avatars.githubusercontent.com/u/43971542?s=96&v=4',
+      name: 'Imed Jaberi',
+    },
+    {
+      avatar: 'https://avatars.githubusercontent.com/u/3624098?s=96&v=4',
+      name: 'Andrew Clark',
+    },
+    {
+      avatar: 'https://avatars.githubusercontent.com/u/857709?s=96&v=4',
+      name: 'Daniel Lytkin',
+    },
+  ];
+
+  let students = [
+    {
+      avatar: 'https://avatars.githubusercontent.com/u/20658625?s=96&v=4',
+      name: 'Aissaoui Ahmed',
+    },
+    {
+      avatar: 'https://avatars.githubusercontent.com/u/26669835?s=96&v=4',
+      name: 'Mahfoudh Arous',
+    },
+  ];
+
+  let borderBottom = 'border-r-0 border-b border-l-0';
+  function addTeacher() {}
+  function addStudent() {}
+</script>
+
+<div class="root w-full py-5">
+  <div class="max-w-2xl mx-auto my-5">
+    <div
+      class="flex items-center justify-between {borderBottom} border-blue-700"
+    >
+      <h3 class="text-3xl text-blue-700">Teachers</h3>
+      <IconButton
+        toolTipProps={{ title: 'Add', direction: 'right' }}
+        onClick={addTeacher}
+        selected={true}
+      >
+        <AddAlt32 class="carbon-icon" />
+      </IconButton>
+    </div>
+
+    {#each teachers as teacher, index}
+      <div
+        class="flex items-center px-2 py-3 {teachers[index + 1] &&
+          borderBottom} border-gray-300"
+      >
+        <Avatar src={teacher.avatar} name={teacher.name} />
+        <p class="ml-2">{teacher.name}</p>
+      </div>
+    {/each}
+  </div>
+
+  <div class="max-w-2xl mx-auto my-5">
+    <div
+      class="flex items-center justify-between {borderBottom} border-blue-700"
+    >
+      <h3 class="text-3xl text-blue-700">Students</h3>
+      <IconButton
+        toolTipProps={{ title: 'Add', direction: 'right' }}
+        onClick={addStudent}
+        selected={true}
+      >
+        <AddAlt32 class="carbon-icon" />
+      </IconButton>
+    </div>
+
+    {#each students as student, index}
+      <div
+        class="flex items-center px-2 py-3 {students[index + 1] &&
+          borderBottom} border-gray-300"
+      >
+        <Avatar src={student.avatar} name={student.name} />
+        <p class="ml-2">{student.name}</p>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .root {
+    min-height: 90vh;
+  }
+</style>