Ask page

src/components/Tailwindcss.svelte

@@ -2,4 +2,9 @@
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
+
+  h1, h2, h3, h4, h5, h6 {
+    font-size: revert;
+    font-weight: revert;
+  }
 </style>

src/components/TextEditor.svelte

@@ -2,7 +2,8 @@
   import marked from 'marked';
 
   let isWriteMode = true;
-  let value = ``;
+  export let value = ``;
+  export let placeholder = ``;
   const activeClassName = 'border-b-2 border-blue-700';;
 
   const handleTabClick = tab => event => {
@@ -52,7 +53,7 @@
     {#if isWriteMode}
       <textarea
         bind:value
-        placeholder="Предлогайте ваш ответ"
+        placeholder="{placeholder}"
         class="border border-gray rounded-md p-2"
       ></textarea>
     {:else}

src/routes/ask.svelte

@@ -1,7 +1,50 @@
+<script context="module">
+  import ChevronDown24 from "carbon-icons-svelte/lib/ChevronDown24";
+	import TextEditor from "../components/TextEditor.svelte";
+
+  let questionTitle = '';
+  let questionTags = [];
+  let questionDescription = '';
+
+  const faculties = [
+    'ИЭКСУ', 'ИМБТ', 'ИМИ', 'ИПТДМ', 'ИИИР', 'ГФ', 'ХТФ', 'ИДЗО', 'УИИ', 'УНИ'
+  ];
+</script>
+
 <svelte:head>
-	<title>About</title>
+	<title>Спросить собшество вопрос</title>
 </svelte:head>
 
-<h1>About this site</h1>
+<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">
+    <button class="flex border rounded-lg border-grey">
+      <span>Факултеты</span> <ChevronDown24 class="ml-2" />
+    </button>
+    <div>
+      {#each faculties as faculty}
+        <div>
+          <input type="checkbox" class="appearance-none checked:bg-blue-600 checked:border-transparent">
+          <span>{faculty}</span>
+        </div>
+      {/each}
+    </div>
+    <input
+      class="title rounded-lg border border-1 border-gray p-1 w-full"
+      error="false"
+      autocomplete="off"
+      placeholder="Title"
+      aria-label="Title"
+      aria-describedby="title-input-validation"
+      type="text"
+      name="discussion[title]"
+      id="discussion_title"
+      value="{questionTitle}"
+    >
+  </div>
 
-<p>This is the 'about' page. There's not much here.</p>
+  <TextEditor
+    value="{questionDescription}"
+    placeholder="Задайте вопрос или начните разговор"
+  />
+</div>

src/routes/discussion/[id].svelte

@@ -5,6 +5,8 @@
   import TextEditor from "../../components/TextEditor.svelte";
   import CheckmarkOutline20 from "carbon-icons-svelte/lib/CheckmarkOutline20";
 
+  let userComment = '';
+
 	export async function preload({ params }) {
     // the `id` parameter is available because
     // this file is called [id].svelte
@@ -23,10 +25,6 @@
 	export let discussion;
 </script>
 
-<style>
-
-</style>
-
 <svelte:head>
 	<title>{discussion.title}</title>
 </svelte:head>
@@ -91,5 +89,8 @@
     {/each}
 
     <hr>
-    <TextEditor />
+    <TextEditor
+      value="{userComment}"
+      placeholder="Предлогайте ваш ответ"
+    />
 </div>