PatAlcala9/ocbo-esign
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Separated modal and modalbutton

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-09-30 08:53:54 +08:00
parent 03dd6ac4ad
commit 2510353fbf
3 changed files with 64 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/components/Modal/Modal.tsx
View file

@ -1,52 +1,30 @@
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}>
<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>
<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}
</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>
<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>
</>
)
}