Separated modal and modalbutton

src/components/Modal/Modal.tsx

@@ -1,39 +1,18 @@
 import './Modal.sass'
 import { type JSXElement, Show } from 'solid-js'
-import gsap from 'gsap'
 
 interface Props {
   children: JSXElement
   background?: string
   color?: string
   border?: string
-  trigger: boolean
   opacity?: number
 }
 
 export default (props: Props) => {
-  let dialogRef!: HTMLDivElement
-
-  // 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 (
     <>
-      <Show when={props.trigger}>
-        <div class="modal" ref={dialogRef} onClick={closeHandler}>
+      <div class="modal">
         <Show when={props.border}>
           <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}; opacity: ${props.opacity || 1}`}>
             {props.children}
@@ -46,7 +25,6 @@ export default (props: Props) => {
           </div>
         </Show>
       </div>
-      </Show>
     </>
   )
 }

src/components/Modal/ModalButton.tsx

@@ -0,0 +1,51 @@
+import './Modal.sass'
+import { type JSXElement, Show, createSignal } from 'solid-js'
+import Button from '../Button/Button'
+
+interface Props {
+  children: JSXElement
+  background?: string
+  color?: string
+  border?: string
+  opacity?: number
+  label: string
+  edges?: 'curved' | 'rounded' | 'flat'
+  design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
+  width?: number
+  wide?: boolean
+}
+
+export default (props: Props) => {
+  const [isOpen, setIsOpen] = createSignal(false)
+
+  const openHandler = () => {
+    setIsOpen(true)
+  }
+
+  const closeHandler = () => {
+    setIsOpen(false)
+  }
+
+  return (
+    <>
+      <Show when={!isOpen()}>
+        <Button label={props.label} edges={props.edges} design={props.design} onClick={openHandler} />
+      </Show>
+      <Show when={isOpen()}>
+        <div class="modal" onClick={closeHandler}>
+          <Show when={props.border}>
+            <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}; opacity: ${props.opacity || 1}`}>
+              {props.children}
+            </div>
+          </Show>
+
+          <Show when={!props.border}>
+            <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; opacity: ${props.opacity || 1}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
+              {props.children}
+            </div>
+          </Show>
+        </div>
+      </Show>
+    </>
+  )
+}

src/components/index.ts

@@ -14,6 +14,7 @@ export { default as Row } from './Row/Row'
 export { default as Display } from './Display/Display'
 export { default as Padding } from './Padding/Padding'
 export { default as Modal } from './Modal/Modal'
+export { default as ModalButton } from './Modal/ModalButton'
 export { default as Table } from './Table/Table'
 export { default as Combobox } from './Combobox/Combobox'
 export { default as File } from './File/File'