core/panel/ui/Modal.tsx
Untone 952b294345
All checks were successful
Deploy on push / deploy (push) Successful in 6s
0.5.8-panel-upgrade-community-crud-fix
2025-06-30 21:25:26 +03:00

49 lines
1.2 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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