Add a modal dialog component

package.json

@@ -13,6 +13,7 @@
     "warmCaches": "node app/index.mjs warmCaches"
   },
   "dependencies": {
+    "@headlessui/vue": "^1.7.3",
     "@intlify/vite-plugin-vue-i18n": "^6.0.3",
     "console-stamp": "^3.0.6",
     "cron": "^2.1.0",

src/components/ModalDialog.vue

@@ -0,0 +1,36 @@
+<template>
+  <TransitionRoot as="template" :show="show" >
+    <Dialog as="div" class="relative z-20">
+      <TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
+        leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
+        <div class="fixed inset-0 bg-zinc-900/80 transition-opacity backdrop-blur-sm" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 z-20 overflow-y-auto">
+        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+          <TransitionChild as="template" enter="ease-out duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+            <DialogPanel :class="innerClass">
+              <slot />
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+</template>
+
+<script setup>
+import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
+
+defineProps({
+  show: {
+    type: Boolean,
+    default: true,
+  },
+  innerClass: String,
+});
+</script>

src/layouts/MainLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <main class="min-h-screen flex flex-col overflow-hidden">
-    <div class="flex flex-col md:flex-row space-y-2 md:space-y-0 justify-between items-center mx-4 my-4 md:mx-12 z-50">
+    <div class="flex flex-col md:flex-row space-y-2 md:space-y-0 justify-between items-center mx-4 my-4 md:mx-12 z-10">
       <div class="font-splatoon1 text-5xl text-shadow-lg">
         <router-link to="/">Splatoon 3</router-link>
       </div>