WIP: account info modal prototype with a little bit of pinia state mgmt.

src/views/AccountManagement/ModalAccountEdit.vue

@@ -1,14 +1,7 @@
 <template>
     <div id="modal_account_edit" class="w-[600px] h-[296px] bg-[#FFFFFF] rounded
         shadow-lg flex flex-col">
-        <header class="w-full flex h-[64px] justify-between pr-[22px] pl-[16px] items-center
-            border-b border-b-[1px] border-[#CBD5E1]
-        ">
-            <h1 class="flex text-base font-bold"> {{ i18next.t("AcctMgmt.AccountEdit") }}</h1>
-            <img src="@/assets/icon-x.svg" alt="X" class="flex cursor-pointer"
-                @click="onCloseBtnClick"
-            />
-        </header>
+        <ModalHeader :headerText="i18next.t('AcctMgmt.AccountEdit')"/>
         
         <main class="flex row h-[96px] my-[32px] flex-col px-8">
             <div class="input-row w-full flex py-3">
@@ -38,21 +31,25 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import i18next from "@/i18n/i18n.js";
 import { mapActions, } from 'pinia';
 import { useModalStore } from '@/stores/modal.js';
+import ModalHeader from "./ModalHeader.vue";
 
-export default {
+export default defineComponent({
     setup() {
-      return {
-
-      };
+        return {
+        };
     },
     data() {
         return {
             i18next: i18next,
         };
     },
+    components: {
+        ModalHeader,
+    },
     methods: {
         onConfirmBtnClick(){
             //TODO:
@@ -65,7 +62,7 @@ export default {
         },
         ...mapActions(useModalStore, ['closeModal']),
     }
-};
+});
 
 </script>
 <style>