ui: improvement

components/ModalAuthentication.vue

@@ -2,6 +2,7 @@
 import {Label, PinInputInput, PinInputRoot} from 'radix-vue'
 
 const toast = useToast()
+const modal = useModal()
 
 const sms_triggered = ref(false)
 const sms_sending = ref(false)
@@ -50,8 +51,16 @@ const obtainSmsCode = () => {
 </script>
 
 <template>
-  <UModal>
+  <UModal prevent-close>
     <UCard>
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            Modals
+          </h3>
+          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="modal.close()"/>
+        </div>
+      </template>
 
       <UTabs :items="items" class="w-full">
         <template #default="{ item, index, selected }">