restructured components so that there are more components in the pages

Management.Web/Pages/QuizForm/MarkdownQuestionPreview.razor

@@ -0,0 +1,82 @@
+@using Markdig
+
+@code {
+  [Parameter, EditorRequired]
+  public LocalQuizQuestion Question { get; set; } = default!;
+
+}
+
+<div class="row justify-content-between text-secondary">
+  <div class="col">
+    points: @Question.Points
+  </div>
+  <div class="col-auto">
+    @Question.QuestionType
+  </div>
+</div>
+
+
+@((MarkupString)Question.HtmlText)
+
+@if(Question.QuestionType == QuestionType.MATCHING)
+{
+  @foreach(var answer in Question.Answers)
+  {
+    <div class="mx-3 mb-1 bg-dark px-2 rounded rounded-2 border row">
+        <div
+          class="col text-end my-auto p-1"
+        >
+          @answer.Text
+        </div>
+        <div
+          class="col my-auto"
+        >
+          @answer.MatchedText
+        </div>
+    </div>
+  }
+}
+else
+{
+  @foreach(var answer in Question.Answers)
+  {
+    string answerPreview = answer.HtmlText.StartsWith("<p>") 
+      ? answer.HtmlText.Replace("<p>", "<p class='m-0'>")
+      : answer.HtmlText;
+
+    <div class="mx-3 mb-1 bg-dark px-2  rounded rounded-2 d-flex flex-row border">
+      @if(answer.Correct)
+      {
+        <svg
+          style="width: 1em;" 
+          class="me-1 my-auto"
+          viewBox="0 0 24 24" 
+          fill="none" 
+        >
+          <path 
+            d="M4 12.6111L8.92308 17.5L20 6.5" 
+            stroke="var(--bs-success)" 
+            stroke-width="2" 
+            stroke-linecap="round" 
+            stroke-linejoin="round"
+            />
+        </svg>
+      }
+      else
+      {
+        <div
+          class="me-1 my-auto"
+          style="width: 1em;" 
+        >
+          @if(Question.QuestionType == QuestionType.MULTIPLE_ANSWERS)
+          {
+            <span>[ ]</span>
+          }
+        </div>
+      }
+      <div class="markdownQuizAnswerPreview p-1">
+        @((MarkupString)answerPreview)
+      </div>
+    </div>
+  } 
+}