From 7d40b5007e18a9b5a90a6164a0229c5e3be3ab10 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Mon, 22 Sep 2025 12:54:41 +0800
Subject: [PATCH] New modal component

---
 fwt/components/Modal.tsx | 27 +++++++++++++++++++++++++++
 fwt/styles/Modal.sass    | 20 ++++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 fwt/components/Modal.tsx
 create mode 100644 fwt/styles/Modal.sass

diff --git a/fwt/components/Modal.tsx b/fwt/components/Modal.tsx
new file mode 100644
index 0000000..70068fa
--- /dev/null
+++ b/fwt/components/Modal.tsx
@@ -0,0 +1,27 @@
+import '../styles/Modal.sass'
+import { type JSXElement, Show, createSignal } from 'solid-js'
+
+interface Props {
+  children: JSXElement
+  background?: string
+  color?: string
+  border?: string
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <Show when={props.border}>
+        <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}`}>
+          {props.children}
+        </div>
+      </Show>
+
+      <Show when={!props.border}>
+        <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
+          {props.children}
+        </div>
+      </Show>
+    </>
+  )
+}
diff --git a/fwt/styles/Modal.sass b/fwt/styles/Modal.sass
new file mode 100644
index 0000000..9f8368d
--- /dev/null
+++ b/fwt/styles/Modal.sass
@@ -0,0 +1,20 @@
+@use '/src/styles/variables.sass' as vars
+@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(vars.$background, $blackness: 5%), 0.6)
+  z-index: 999
+
+  &__content
+    border-radius: 8px
+    padding: 2rem
+    position: relative