feat: implement Modal component

master
Katja Lutz 2 years ago
parent 10fff0f3bb
commit ef4eaa44fc

@ -0,0 +1,39 @@
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: true,
"modal-open": props.open,
"!visible": isVisible(),
}}
>
<div class="modal-box w-1/2 p-20 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>
);
Loading…
Cancel
Save