import { InlineStack, Modal } from '@xotiny/preact';
import { FC, useState } from 'preact/compat';
export const ModalDemo: FC = () => {
const [open, setOpen] = useState(false);
const [open2, setOpen2] = useState(false);
return (
<div>
<button onClick={() => setOpen(true)}>Open modal</button>
<button onClick={() => setOpen2(true)}>Sử dụng Modal.Layout</button>
<Modal open={open} onBackdropClick={() => setOpen(false)} animationType="fade-up">
<h2>Modal</h2>
<button onClick={() => setOpen(false)}>Close</button>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda illum nihil ad numquam asperiores quam vel dolores reprehenderit debitis
cupiditate incidunt atque, necessitatibus sed obcaecati laudantium architecto perferendis iste mollitia! Magni, id saepe. Rem laudantium
odio eaque est velit nobis doloremque excepturi veniam perferendis sed? Soluta, harum eos voluptate nobis eveniet corrupti asperiores culpa
maiores dolorem rerum ducimus repellat provident dignissimos ut itaque consequuntur, quae saepe dicta cum sapiente blanditiis quis molestias
iure. Nemo voluptatem magnam cupiditate modi at ullam ab quidem blanditiis consectetur quos repellat quas, adipisci accusantium dignissimos
fuga natus minima beatae numquam voluptatum, non dicta harum error?
</div>
</Modal>
<Modal open={open2} onBackdropClick={() => setOpen2(false)} animationType="zoom-in">
<Modal.Layout
bodyMaxHeight="calc(100vh - 100px)"
header={
<InlineStack align="space-between" blockAlign="center">
<h5>Header</h5>
<button onClick={() => setOpen2(false)}>Close</button>
</InlineStack>
}
footer={<div>Footer</div>}
>
<h2>Modal</h2>
</Modal.Layout>
</Modal>
</div>
);
};