feat(dashboard): use tabs for overlays registry html layer

twirapp · Sep 18, 2023 · bfc2e52 · bfc2e52
1 parent 29ce3db
commit bfc2e52
Showing 1 changed file with 33 additions and 16 deletions.
diff --git 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>