restructured components so that there are more components in the pages

Management.Web/Pages/QuizForm/MarkdownQuizForm.razor

@@ -0,0 +1,79 @@
+@using Management.Web.Shared.Components
+
+@inject QuizEditorContext quizContext
+
+@code {
+  private Modal? modal { get; set; }
+
+  private LocalQuiz? testQuiz;
+
+  private string? error { get; set; } = null;
+  private string _quizMarkdownInput { get; set; } = "";
+  private string quizMarkdownInput
+  {
+    get => _quizMarkdownInput;
+    set
+    {
+      _quizMarkdownInput = value;
+
+      try
+      {
+        var newQuiz = LocalQuiz.ParseMarkdown(_quizMarkdownInput);
+        error = null;
+        testQuiz = newQuiz;
+        quizContext.SaveQuiz(newQuiz);
+      }
+      catch (QuizMarkdownParseException e)
+      {
+        error = e.Message;
+        StateHasChanged();
+      }
+    }
+  }
+
+  protected override void OnInitialized()
+  {
+    reload();
+    quizContext.StateHasChanged += reload;
+  }
+  private void reload()
+  {
+    if (quizContext.Quiz != null)
+    {
+      if (quizMarkdownInput == "")
+      {
+        quizMarkdownInput = quizContext.Quiz.ToMarkdown();
+      }
+      this.InvokeAsync(this.StateHasChanged);
+    }
+  }
+  public void Dispose()
+  {
+    quizContext.StateHasChanged -= reload;
+  }
+}
+
+<div class="d-flex flex-column h-100">
+  <div class="d-flex flex-row h-100 p-2">
+    <div class="row flex-grow-1">
+      <div class="col-6">
+        <MonacoTextArea
+          Value="@quizMarkdownInput"
+          OnChange="@((v) => quizMarkdownInput = v)"
+        />
+
+      </div>
+      <div class="col-6 h-100 overflow-y-auto">
+        @if (error != null)
+        {
+          <p class="text-danger text-truncate">Error: @error</p>
+        }
+        @if(testQuiz != null)
+        {
+          <QuizPreview Quiz="testQuiz" />
+        }
+      </div>
+    </div>
+  </div>
+
+</div>