🚧 New editor nearly done

frontend/src/lib/editor.svelte

@@ -5,6 +5,7 @@
 	import type { EditorData, Question, Answer } from './quiz_types';
 	import Sidebar from '$lib/editor/sidebar.svelte';
 	import SettingsCard from '$lib/editor/settings-card.svelte';
+	import QuizCard from '$lib/editor/card.svelte';
 
 	const { t } = getLocalization();
 
@@ -68,9 +69,38 @@
 	<div>
 		<Sidebar bind:data bind:selected_question />
 	</div>
-	<div class="col-span-5">
-		{#if selected_question === -1}
-			<SettingsCard bind:data />
-		{/if}
+	<div class="col-span-5 flex flex-col">
+		<div class="h-10 w-full bg-white mb-10 flex align-middle justify-center rounded-br-lg">
+			{#if schemaInvalid}
+				<p class="text-center w-full text-red-600 h-full">{yupErrorMessage}</p>
+			{/if}
+			<button
+				class="pr-2 align-middle bg-purple-400 pl-2 ml-auto whitespace-nowrap disabled:opacity-60 rounded-br-lg"
+				disabled={schemaInvalid}
+			>
+				<span>Save</span>
+				<svg
+					class="w-6 h-6 inline-block"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
+					/>
+				</svg>
+			</button>
+		</div>
+		<div class="w-full h-full">
+			{#if selected_question === -1}
+				<SettingsCard bind:data />
+			{:else}
+				<QuizCard bind:data bind:selected_question />
+			{/if}
+		</div>
 	</div>
 </div>