Restructure components

src/components/AskPage/AskPage.svelte

@@ -1,46 +1,52 @@
 <script context="module">
   import ChevronDown24 from "carbon-icons-svelte/lib/ChevronDown24";
-	import TextEditor from "./TextEditor.svelte";
+  import TextEditor from "../TextEditor/index.svelte";
 
-  let questionTitle = '';
+  let questionTitle = "";
   let questionTags = [];
-  let questionDescription = '';
+  let questionDescription = "";
   let facultyFilterOpened = true;
 
   const faculties = [
-    'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
+    "ИЭКСУ",
+    "ИМБТ",
+    "ИМИ",
+    "ИПТДМ",
+    "ИИИР",
+    "ГФ",
+    "ХТФ",
+    "ИДЗО",
+    "УИИ",
+    "УНИ",
   ];
 
   function handleFacultyFilters() {
-    console.log('clicking')
+    console.log("clicking");
     facultyFilterOpened = facultyFilterOpened ? false : true;
   }
   let things = [
-		{ id: 1, color: 'darkblue' },
+    { id: 1, color: "darkblue" },
-		{ id: 2, color: 'indigo' },
+    { id: 2, color: "indigo" },
-		{ id: 3, color: 'deeppink' },
+    { id: 3, color: "deeppink" },
-		{ id: 4, color: 'salmon' },
+    { id: 4, color: "salmon" },
-		{ id: 5, color: 'gold' }
+    { id: 5, color: "gold" },
-	];
+  ];
 
-	function handleClick() {
+  function handleClick() {
     things = things.slice(1);
-    console.log('things', things)
+    console.log("things", things);
-	}
+  }
 </script>
 
 <svelte:head>
-	<title>Спросить собшество вопрос</title>
+  <title>Спросить собшество вопрос</title>
 </svelte:head>
 
-
 <div class="lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
   <h2 class="pb-2">Спросить собшество вопрос</h2>
   <div class="my-1 px-1">
     <div class="mb-5">
-      <button on:click={handleClick}>
+      <button on:click={handleClick}> Remove first thing </button>
-        Remove first thing
-      </button>
       {#each things as thing}
         <p style="color: {thing.color}">{thing.id}</p>
       {/each}
@@ -48,14 +54,18 @@
         class="flex border rounded-lg border-grey py-1 px-3 focus:outline-none focus:border-gray-400 focus:bg-gray-200"
         on:click={handleFacultyFilters}
       >
-        <span>Факултеты</span> <ChevronDown24 class="ml-2" />
+        <span>Факултеты</span>
+        <ChevronDown24 class="ml-2" />
       </button>
 
       {#if facultyFilterOpened}
         <div class="w-48 bg-white border border-grey rounded-lg mt-2 py-2">
           {#each faculties as faculty}
             <div class="block px-4 py-2 border-b">
-              <input type="checkbox" class="border border-gray checked:bg-blue-600 checked:border-transparent mr-1 cursor-pointer">
+              <input
+                type="checkbox"
+                class="border border-gray checked:bg-blue-600 checked:border-transparent mr-1 cursor-pointer"
+              />
               <span>{faculty}</span>
             </div>
           {/each}
@@ -72,12 +82,12 @@
       type="text"
       name="discussion[title]"
       id="discussion_title"
-      value="{questionTitle}"
+      value={questionTitle}
-    >
+    />
   </div>
 
   <TextEditor
-    value="{questionDescription}"
+    value={questionDescription}
     placeholder="Задайте вопрос или начните разговор"
   />
 </div>

src/components/Chip/index.svelte

@@ -1,5 +1,5 @@
 <script>
-	export let value;
+  export let value;
 </script>
 
 <p>{value}</p>

src/components/LeftNav/index.svelte

@@ -1,5 +1,5 @@
 <script>
-  import NewQuestion from "./NewQuestion.svelte";
+  import NewQuestion from "../NewQuestion/index.svelte";
   import Home32 from "carbon-icons-svelte/lib/Home32";
   import SendAlt32 from "carbon-icons-svelte/lib/SendAlt32";
   import UserAvatar32 from "carbon-icons-svelte/lib/UserAvatar32";

src/components/Nav.svelte

@@ -1,96 +0,0 @@
-<script>
-	import Space from "./Space.svelte";
-	import NewQuestion from "./NewQuestion.svelte";
-	export let segment;
-</script>
-
-<style>
-	nav {
-		border-bottom: 1px solid rgba(255, 62, 0, 0.1);
-		font-weight: 300;
-		padding: 0 1em;
-		display: flex;
-		position: sticky;
-		top: 0px;
-		background-color: #fff;
-		z-index: 1;
-	}
-
-	ul {
-		margin: 0;
-		padding: 0;
-	}
-
-	/* clearfix */
-	ul::after {
-		content: "";
-		display: block;
-		clear: both;
-	}
-
-	li {
-		display: block;
-		float: left;
-	}
-
-	[aria-current] {
-		position: relative;
-		display: inline-block;
-	}
-
-	[aria-current]::after {
-		position: absolute;
-		content: "";
-		width: calc(100% - 1em);
-		height: 2px;
-		background-color: #3182ce;
-		display: block;
-		bottom: -1px;
-	}
-
-	a {
-		text-decoration: none;
-		padding: 1em 0.5em;
-	}
-</style>
-
-<nav>
-	<ul>
-		<li>
-			<a
-				class="block"
-				aria-current={segment === undefined || segment === 'discussion' ? 'page' : undefined}
-				href=".">UniDiscuss</a>
-		</li>
-	</ul>
-	<Space />
-	<ul class="flex items-center">
-		<li>
-			<NewQuestion />
-		</li>
-		<li>
-			<a
-				class="flex items-center"
-				href="https://t.me/unidiscuss"
-				target="_blank">
-				<img
-					alt="File:Telegram logo.svg"
-					class="mr-1"
-					src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png"
-					decoding="async"
-					width="25"
-					height="25"
-					srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/1024px-Telegram_logo.svg.png 2x"
-					data-file-width="25"
-					data-file-height="25" />
-				<span>Канал</span>
-			</a>
-		</li>
-		<li>
-			<a
-				class="block"
-				aria-current={segment === 'profile' ? 'page' : undefined}
-				href="profile">Войти</a>
-		</li>
-	</ul>
-</nav>

src/components/Nav/index.svelte

@@ -0,0 +1,102 @@
+<script>
+  import Space from "../Space/index.svelte";
+  import NewQuestion from "../NewQuestion/index.svelte";
+  export let segment;
+</script>
+
+<nav>
+  <ul>
+    <li>
+      <a
+        class="block"
+        aria-current={segment === undefined || segment === "discussion"
+          ? "page"
+          : undefined}
+        href=".">UniDiscuss</a
+      >
+    </li>
+  </ul>
+  <Space />
+  <ul class="flex items-center">
+    <li>
+      <NewQuestion />
+    </li>
+    <li>
+      <a
+        class="flex items-center"
+        href="https://t.me/unidiscuss"
+        target="_blank"
+      >
+        <img
+          alt="File:Telegram logo.svg"
+          class="mr-1"
+          src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png"
+          decoding="async"
+          width="25"
+          height="25"
+          srcset="https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Telegram_alternative_logo.svg/50px-Telegram_alternative_logo.svg.png 1.5x, https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/1024px-Telegram_logo.svg.png 2x"
+          data-file-width="25"
+          data-file-height="25"
+        />
+        <span>Канал</span>
+      </a>
+    </li>
+    <li>
+      <a
+        class="block"
+        aria-current={segment === "profile" ? "page" : undefined}
+        href="profile">Войти</a
+      >
+    </li>
+  </ul>
+</nav>
+
+<style>
+  nav {
+    border-bottom: 1px solid rgba(255, 62, 0, 0.1);
+    font-weight: 300;
+    padding: 0 1em;
+    display: flex;
+    position: sticky;
+    top: 0px;
+    background-color: #fff;
+    z-index: 1;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  /* clearfix */
+  ul::after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+
+  li {
+    display: block;
+    float: left;
+  }
+
+  [aria-current] {
+    position: relative;
+    display: inline-block;
+  }
+
+  [aria-current]::after {
+    position: absolute;
+    content: "";
+    width: calc(100% - 1em);
+    height: 2px;
+    background-color: #3182ce;
+    display: block;
+    bottom: -1px;
+  }
+
+  a {
+    text-decoration: none;
+    padding: 1em 0.5em;
+  }
+</style>

src/components/Vote.svelte

@@ -1,31 +0,0 @@
-<script>
-	import ArrowUp16 from "carbon-icons-svelte/lib/ArrowUp16";
-	import Chip from "./Chip.svelte";
-
-	export let value = 0;
-
-	function upVote() {
-		value = value + 1;
-	}
-</script>
-
-
-<div
-	class="vote border-none cursor-pointer"
-	on:click={upVote}
->
-  <ArrowUp16 />
-  <Chip value="{value}" />
-</div>
-
-<style>
-	.vote {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		min-width: 25px;
-		width: 25px;
-		justify-content: center;
-		margin-right: 10px;
-	}
-</style>

src/components/Vote/index.svelte

@@ -0,0 +1,27 @@
+<script>
+  import ArrowUp16 from "carbon-icons-svelte/lib/ArrowUp16";
+  import Chip from "../Chip/index.svelte";
+
+  export let value = 0;
+
+  function upVote() {
+    value = value + 1;
+  }
+</script>
+
+<div class="vote border-none cursor-pointer" on:click={upVote}>
+  <ArrowUp16 />
+  <Chip {value} />
+</div>
+
+<style>
+  .vote {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 25px;
+    width: 25px;
+    justify-content: center;
+    margin-right: 10px;
+  }
+</style>

src/routes/_layout.svelte

@@ -1,9 +1,9 @@
 <script>
   import Tailwindcss from "../components/Tailwindcss.svelte";
   // import Nav from "../components/Nav.svelte";
-  import LeftNav from "../components/LeftNav.svelte";
+  import LeftNav from "../components/LeftNav/index.svelte";
-  import SideBar from "../components/SideBar.svelte";
+  import SideBar from "../components/SideBar/index.svelte";
-  import Footer from "../components/Footer.svelte";
+  import Footer from "../components/Footer/index.svelte";
 
   export let segment;
 </script>

src/routes/ask.svelte

@@ -1,6 +1,6 @@
 <script>
   import ChevronDown24 from "carbon-icons-svelte/lib/ChevronDown24";
-  import TextEditor from "../components/TextEditor.svelte";
+  import TextEditor from "../components/TextEditor/index.svelte";
 
   let questionTitle = "";
   let questionDescription = "";

src/routes/index.svelte

@@ -1,9 +1,9 @@
 <script>
   import { stores } from "@sapper/app";
   import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
-  import Vote from "../components/Vote.svelte";
+  import Vote from "../components/Vote/index.svelte";
-  import Space from "../components/Space.svelte";
+  import Space from "../components/Space/index.svelte";
-  import HashTags from "../components/HashTags.svelte";
+  import HashTags from "../components/HashTags/index.svelte";
 
   function getDiscussion(filterBy, allDiscussions) {
     switch (filterBy) {