Updated

@dasig/components/Modal.astro

@@ -0,0 +1,44 @@
+---
+interface Props {
+  background?: string
+  color?: string
+  border?: string
+}
+
+const { background, color, border } = Astro.props
+---
+
+{
+  border ? (
+    <div class="modal__content" style={`background-color: ${background}; color: ${color}; border: 2px solid ${border}`}>
+      <slot />
+    </div>
+  ) : (
+    <div class="modal__content" style={`background-color: ${background}; color: ${color}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
+      <slot />
+    </div>
+  )
+}
+
+<style lang="sass">
+  @use '../../configs/design/site' as site
+  @use 'sass:color'
+
+  .modal
+    display: flex
+    justify-content: center
+    align-items: center
+    position: fixed
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    backdrop-filter: blur(20px)
+    background-color: rgba(color.adjust(site.$dark-background, $blackness: 5%), 0.6)
+    z-index: 999
+
+    &__content
+      border-radius: 8px
+      padding: 2rem
+      position: relative
+</style>