Tailwind, side barr, add new component button, layour of route

src/components/Chip.svelte

@@ -17,5 +17,6 @@
     background-color: #d1d5da80;
     border: 1px solid transparent;
     border-radius: 2em;
+    margin: 6px 0 0;
   }
 </style>

src/components/Nav.svelte

@@ -1,4 +1,5 @@
 <script>
+	import Space from "./Space.svelte";
 	export let segment;
 </script>
 
@@ -37,7 +38,7 @@
 		content: '';
 		width: calc(100% - 1em);
 		height: 2px;
-		background-color: rgb(255,62,0);
+		background-color: #3182ce;
 		display: block;
 		bottom: -1px;
 	}
@@ -47,19 +48,15 @@
 		padding: 1em 0.5em;
 		display: block;
 	}
-
-	.actions {
-		flex-grow: 1;
-	}
 </style>
 
 <nav>
 	<ul>
 		<li><a aria-current="{segment === undefined ? 'page' : undefined}" href=".">UniDiscuss</a></li>
 	</ul>
-	<div class="actions"></div>
+	<Space/>
 	<ul>
-		<li><a aria-current="{segment === 'ask' ? 'page' : undefined}" href="ask">Ask</a></li>
+		<!-- <li><a aria-current="{segment === 'ask' ? 'page' : undefined}" href="ask">Ask</a></li> -->
 		<li><a aria-current="{segment === 'profile' ? 'page' : undefined}" href="profile">Profile</a></li>
 	</ul>
 </nav>

src/components/NewQuestion.svelte

@@ -0,0 +1,15 @@
+<script>
+    import AddComment20 from "carbon-icons-svelte/lib/AddComment20";
+
+</script>
+
+<style>
+  .root {
+    height: fit-content;
+  }
+</style>
+
+<button class="root bg-blue-600 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded inline-flex items-center float-right">
+  <AddComment20  class="fill-current w-4 h-4 mr-2" />
+  <a href="/ask">Спросить</a>
+</button>

src/components/SideBar.svelte

@@ -0,0 +1,69 @@
+<script>
+  // your script goes here
+  const contributors = [
+    {
+      name: 'Koskting'
+    },
+    {
+      name: 'Koskting'
+    },
+    {
+      name: 'Koskting'
+    },
+    {
+      name: 'Koskting'
+    },
+    {
+      name: 'Koskting'
+    },
+  ];
+</script>
+
+<style>
+  .sidebar-root {
+    padding: 16px;
+    border: 1px solid #e1e4e8;
+    border-radius: 6px;
+    width: 200px;
+    height: fit-content;
+  }
+
+  h4 {
+    font-size: 14px;
+    font-weight: 600;
+    border-bottom: 1px solid #e1e4e8;
+    padding-bottom: 10px;
+  }
+
+  .avatar {
+    border-radius: 50%;
+    display: inline-block;
+    overflow: hidden;
+    line-height: 1;
+    vertical-align: middle;
+    border-radius: 6px;
+    margin-right: 10px;
+  }
+
+  .contributer-link {
+    display: flex;
+    padding: 8px 0;
+  }
+</style>
+
+<!-- markup (zero or more items) goes here -->
+<div class="sidebar-root">
+  <h4>Most helpful</h4>
+  {#each contributors as contributor}
+    <a class="contributer-link" href="/{contributor.name}">
+      <img
+        class="avatar"
+        src="https://avatars0.githubusercontent.com/u/2854919?s=40&amp;v=4"
+        width="20"
+        height="20"
+        alt="@jamesmosier"
+      >
+      <span>{contributor.name}</span>
+    </a>
+	{/each}
+</div>

src/components/Space.svelte

@@ -0,0 +1,9 @@
+
+<style>
+	.actions {
+		flex-grow: 1;
+	}
+</style>
+
+	<div class="actions"></div>
+

src/components/Tailwindcss.svelte

@@ -0,0 +1,5 @@
+<style global>
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+</style>

src/components/Vote.svelte

@@ -0,0 +1,23 @@
+<script>
+	import ArrowUp16 from "carbon-icons-svelte/lib/ArrowUp16";
+	import Chip from "./Chip.svelte";
+
+	export let value = 0;
+</script>
+
+
+<div class="vote">
+  <ArrowUp16 />
+  <Chip value="{value}" />
+</div>
+
+<style>
+	.vote {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 56px;
+		justify-content: center;
+		margin-right: 10px;
+	}
+</style>