feat: implement Modal component
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…
Reference in New Issue