72 lines
1.7 KiB
TypeScript
72 lines
1.7 KiB
TypeScript
// <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>
|
|
</>
|
|
)
|
|
}
|