feat: add modal component

Author: Link1515

src/components/Modal.astro

@@ -0,0 +1,29 @@
+<div id="modal" class="pointer-none fixed top-0 left-0 -z-50 flex h-full w-full items-center justify-center bg-black/20 px-4 py-8 opacity-0 backdrop-blur-xs transition-opacity duration-300">
+  <div class="flex max-h-full max-w-lg min-w-80 translate-y-5 flex-col rounded-lg bg-white p-4 transition-transform duration-300">
+    <div class="modal-header"></div>
+    <div class="modal-body overflow-y-auto"></div>
+  </div>
+</div>
+
+<script>
+  import { hideModal } from '~/utils/client/modal'
+
+  const modalEl = document.querySelector('#modal')
+
+  modalEl?.addEventListener('click', e => {
+    if (e.target !== e.currentTarget) return
+    hideModal()
+  })
+</script>
+
+<style>
+  #modal.show {
+    opacity: 1;
+    pointer-events: auto;
+    z-index: 99999;
+  }
+
+  #modal.show > div {
+    translate: 0;
+  }
+</style>

src/layouts/Layout.astro

@@ -5,6 +5,7 @@ import Navbar from '~/components/Navbar.astro'
 import Footer from '~/components/Footer.astro'
 import CookieNotice from '~/components/CookieNotice.astro'
 import StagingInfo from '~/components/StagingInfo.astro'
+import Modal from '~/components/Modal.astro'
 import { isStaging } from '~/utils/build/isStaging'
 import { getLocaleFromPath } from '~/i18n/utils'
 
@@ -24,6 +25,7 @@ const { pageName } = Astro.props
       <CookieNotice />
       {isStaging() && <StagingInfo />}
     </div>
+    <Modal />
 
     <script is:inline src="https://cdn.jsdelivr.net/npm/iconify-icon@3.0.0/dist/iconify-icon.min.js"></script>
   </body>

src/styles/base.css

@@ -213,39 +213,6 @@
   }
 }
 
-body[lang='en-TW'] .timeline-item-title {
-  @apply text-xl;
-}
-
-#modal {
-  @apply fixed top-0 left-0 z-50 flex h-full w-full items-center justify-center p-4;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(2px);
-  transition: all 0.3s ease;
-  opacity: 0;
-  pointer-events: none;
-  > .inner-modal {
-    @apply flex max-w-lg min-w-80 flex-col bg-white;
-    max-height: 100%;
-    transition: all 0.3s ease;
-    transform: translateY(20px);
-  }
-  .modal-body {
-    flex: 1;
-    overflow-y: auto;
-    hr {
-      margin: 1rem 0;
-    }
-  }
-  &.show {
-    opacity: 1;
-    pointer-events: auto;
-    > .inner-modal {
-      transform: translateY(0);
-    }
-  }
-}
-
 footer {
   .rolling-list a {
     @apply text-neutral-600;

src/utils/client/modal.js

@@ -0,0 +1,17 @@
+const modalEl = document.querySelector('#modal')
+const modalHeaderEl = document.querySelector('#modal .modal-header')
+const modalBodyEl = document.querySelector('#modal .modal-body')
+
+export function showModal() {
+  modalEl.classList.add('show')
+}
+
+export function hideModal() {
+  modalEl.classList.remove('show')
+}
+
+export function showModalWith({ header, body }) {
+  modalHeaderEl.innerHTML = header
+  modalBodyEl.innerHTML = body
+  showModal()
+}