Initial commit

fwt/components/Modal.tsx

@@ -0,0 +1,72 @@
+// <script>
+//   const modal = document.getElementById('modal')
+//   const modalButton = document.getElementById('modal-button')
+
+//   modalButton?.addEventListener('click', () => {
+//     gsap.to(modal, {
+//       duration: 0,
+//       display: 'block',
+//       ease: 'power2.out',
+//     })
+//   })
+
+//   modal?.addEventListener('click', () => {
+//     gsap.to(modal, {
+//       duration: 0,
+//       display: 'none',
+//       ease: 'power2.out',
+//     })
+//   })
+// </script>
+
+import '../styles/Modal.sass'
+import { type JSXElement, Show, createSignal } from 'solid-js'
+import gsap from 'gsap'
+import Button from './Button'
+
+interface Props {
+  children: JSXElement
+  background?: string
+  color?: string
+  border?: string
+}
+
+export default (props: Props) => {
+  let dialogRef!: HTMLDivElement
+
+  const [open, setOpen] = createSignal(false)
+
+  const openHandler = () => {
+    gsap.to(dialogRef, {
+      duration: 0,
+      display: 'flex',
+      ease: 'power2.out',
+    })
+  }
+
+  const closeHandler = () => {
+    gsap.to(dialogRef, {
+      duration: 0,
+      display: 'none',
+      ease: 'power2.out',
+    })
+  }
+
+  return (
+    <>
+      <div class="modal" ref={dialogRef} onClick={closeHandler}>
+        <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>
+      </div>
+    </>
+  )
+}