You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
935 B
TypeScript
40 lines
935 B
TypeScript
import { Component, createEffect, createSignal, FlowComponent } from "solid-js";
|
|
|
|
const Modal: FlowComponent<{ open: boolean }> = (props) => {
|
|
const [isVisible, setVisibility] = createSignal(props.open);
|
|
createEffect(() => {
|
|
if (props.open) {
|
|
setVisibility(true);
|
|
} else {
|
|
setTimeout(function () {
|
|
setVisibility(false);
|
|
}, 200);
|
|
}
|
|
});
|
|
|
|
return (
|
|
<div
|
|
classList={{
|
|
"modal print:hidden": true,
|
|
"modal-open": props.open,
|
|
"!visible": isVisible(),
|
|
}}
|
|
>
|
|
<div class="modal-box relative py-16 w-11/12 lg:w-3/4 xl:w-2/3 xxl:w-1/2 lg:p-16 max-w-none overflow-hidden">
|
|
{props.children}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Modal;
|
|
|
|
export const ModalCloseButton: Component<{ onClick: () => void }> = (props) => (
|
|
<label
|
|
class="btn btn-sm btn-circle absolute right-2 top-2"
|
|
onClick={props.onClick}
|
|
>
|
|
✕
|
|
</label>
|
|
);
|