49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
|
import { Component, JSX, Show } from 'solid-js'
|
|||
|
|
import styles from '../styles/Modal.module.css'
|
|||
|
|
|
|||
|
|
export interface ModalProps {
|
|||
|
|
title: string
|
|||
|
|
isOpen: boolean
|
|||
|
|
onClose: () => void
|
|||
|
|
children: JSX.Element
|
|||
|
|
footer?: JSX.Element
|
|||
|
|
size?: 'small' | 'medium' | 'large'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const Modal: Component<ModalProps> = (props) => {
|
|||
|
|
const handleBackdropClick = (e: MouseEvent) => {
|
|||
|
|
if (e.target === e.currentTarget) {
|
|||
|
|
props.onClose()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const modalClasses = () => {
|
|||
|
|
const baseClass = styles.modal
|
|||
|
|
const sizeClass = styles[`modal-${props.size || 'medium'}`]
|
|||
|
|
return [baseClass, sizeClass].join(' ')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Show when={props.isOpen}>
|
|||
|
|
<div class={styles.backdrop} onClick={handleBackdropClick}>
|
|||
|
|
<div class={modalClasses()}>
|
|||
|
|
<div class={styles.header}>
|
|||
|
|
<h2 class={styles.title}>{props.title}</h2>
|
|||
|
|
<button class={styles.close} onClick={props.onClose}>
|
|||
|
|
×
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class={styles.content}>{props.children}</div>
|
|||
|
|
|
|||
|
|
<Show when={props.footer}>
|
|||
|
|
<div class={styles.footer}>{props.footer}</div>
|
|||
|
|
</Show>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Show>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default Modal
|