Update notes page to use element plus

components/card/MarkdownRenderer.vue

@@ -7,7 +7,7 @@ const parsedMarkdown = computed(() => {
 
 <template>
 	<div
-		class="scrollbar-hidden flex h-full min-h-screen w-full flex-col items-center overflow-y-scroll bg-secondary px-12 py-4">
+		class="scrollbar-hidden flex h-full min-h-screen w-full flex-col items-center overflow-y-scroll px-12 py-4">
 		<div
 			class="scrollbar-hidden h-full max-h-full w-full"
 			v-html="parsedMarkdown">

pages/notes/[id].vue

@@ -2,25 +2,25 @@
 	<NuxtLayout name="edit">
 		<template #content>
 			<div class="mb-2 flex w-full">
-                <input type="text" v-model="note.title" placeholder="untitled" @change="submit()" />
-            </div>
-            <div class="sticky top-0 flex w-full justify-between">
-                <div @click="toggleComp('text')" class="w-1/2 bg-lightgray p-2 text-center text-xl"
-                    :class="{ 'bg-secondary': comp === 'text' }">
-                    Text
-                </div>
-                <div @click="toggleComp('md')" class="w-1/2 bg-lightgray p-2 text-center text-xl"
-                    :class="{ 'bg-secondary': comp === 'md' }">
-                    Markdown
-                </div>
-            </div>
-            <div class="flex h-full w-full flex-col">
-                <textarea ref="noteTextArea" v-show="comp === 'text'"
-                    class="min-h-screen w-full flex-grow resize-none border-none bg-secondary p-4 outline-none placeholder:text-zinc-700 focus:outline-none"
-                    v-model="input" @change="submit()">
-				</textarea>
-                <CardMarkdownRenderer v-show="comp === 'md'" :content="note.description" :state="'description'" />
+				<el-input
+					v-model="note.title"
+					placeholder="untitled"
+					@change="submit()" />
 			</div>
+			<el-tabs type="border-card">
+				<el-tab-pane label="Text">
+					<el-input
+						v-model="input"
+						:autosize="{ minRows: 40 }"
+						type="textarea"
+						placeholder="Please input" />
+				</el-tab-pane>
+				<el-tab-pane label="Markdown">
+					<CardMarkdownRenderer
+						:content="note.description"
+						:state="'description'" />
+				</el-tab-pane>
+			</el-tabs>
 		</template>
 	</NuxtLayout>
 </template>
@@ -98,3 +98,11 @@ watch(
 	}
 )
 </script>
+
+<style scoped>
+:deep(.el-tabs__header) {
+	position: sticky;
+	top: 0;
+	z-index: 100;
+}
+</style>