Improved modal component

src/components/Modal/Modal.tsx

@@ -1,27 +1,25 @@
 import './Modal.sass'
 import { type JSXElement, Show } from 'solid-js'
 import gsap from 'gsap'
-import Button from '../Button/Button'
 
 interface Props {
   children: JSXElement
   background?: string
   color?: string
   border?: string
+  trigger: boolean
 }
 
 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 openHandler = () => {
+  //   gsap.to(dialogRef, {
+  //     duration: 0,
+  //     display: 'flex',
+  //     ease: 'power2.out',
+  //   })
+  // }
 
   const closeHandler = () => {
     gsap.to(dialogRef, {
@@ -33,20 +31,21 @@ export default (props: Props) => {
 
   return (
     <>
-      <Button label="OpenDialog" onClick={openHandler}></Button>
-      <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.trigger}>
+        <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>
+          <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>
+      </Show>
     </>
   )
 }