From bfc2e524e4b12ab3c90930b486a7950738240ad7 Mon Sep 17 00:00:00 2001
From: Satont <satontworldwide@gmail.com>
Date: Mon, 18 Sep 2023 20:56:16 +0300
Subject: [PATCH] feat(dashboard): use tabs for overlays registry html layer

---
 .../registry/overlays/layers/htmlForm.vue     | 49 +++++++++++++------
 1 file changed, 33 insertions(+), 16 deletions(-)

diff --git a/frontend/dashboard/src/components/registry/overlays/layers/htmlForm.vue b/frontend/dashboard/src/components/registry/overlays/layers/htmlForm.vue
index 3f844bcaa..aaca245e4 100644
--- a/frontend/dashboard/src/components/registry/overlays/layers/htmlForm.vue
+++ b/frontend/dashboard/src/components/registry/overlays/layers/htmlForm.vue
@@ -1,6 +1,16 @@
 <!-- eslint-disable no-undef -->
 <script lang="ts" setup>
-import { NModal, NInputNumber, NFormItem, NAlert, NSelect, useMessage, NSwitch } from 'naive-ui';
+import {
+	NModal,
+	NInputNumber,
+	NFormItem,
+	NAlert,
+	NSelect,
+	useMessage,
+	NSwitch,
+	NTabs,
+	NTabPane,
+} from 'naive-ui';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -96,21 +106,28 @@ const { t } = useI18n();
 				<n-select filterable :options="variables" @update:value="(v) => copyVariable(v)" />
 			</n-alert>
 
-			<vue-monaco-editor
-				v-model:value="html"
-				theme="vs-dark"
-				height="500px"
-				language="html"
-				:options="{
-					readOnlyMessage: 'test'
-				}"
-			/>
-			<vue-monaco-editor
-				v-model:value="css"
-				theme="vs-dark"
-				height="500px"
-				language="css"
-			/>
+			<n-tabs type="segment">
+				<n-tab-pane name="HTML">
+					<vue-monaco-editor
+						v-model:value="html"
+						theme="vs-dark"
+						height="500px"
+						language="html"
+						:options="{
+							readOnlyMessage: 'test'
+						}"
+					/>
+				</n-tab-pane>
+
+				<n-tab-pane name="CSS">
+					<vue-monaco-editor
+						v-model:value="css"
+						theme="vs-dark"
+						height="500px"
+						language="css"
+					/>
+				</n-tab-pane>
+			</n-tabs>
 		</div>
 	</n-modal>
 </template>