From 5e0afdfa66ab759f9ae7d1e4b73922256268a626 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Thu, 25 Sep 2025 12:34:55 +0800
Subject: [PATCH] Improved modal component

---
 src/components/Modal/Modal.tsx | 45 +++++++++++++++++-----------------
 1 file changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 78458c8..02a9904 100644
--- a/src/components/Modal/Modal.tsx
+++ b/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>
     </>
   )
 }