import React, { useState } from "react";
import {
Body,
Button,
Caption,
Dialog,
Flex,
RichTextEditor,
Typeahead,
} from "playbook-ui";
const useDialog = (visible = false) => {
const [opened, setOpened] = useState(visible);
const toggle = () => setOpened(!opened);
return [opened, toggle];
};
const DialogFullHeight = () => {
const [headerSeparatorDialogOpened, toggleHeaderSeparatorDialog] =
useDialog();
const [footerSeparatorDialogOpened, toggleFooterSeparatorDialog] =
useDialog();
const [bothSeparatorsDialogOpened, toggleBothSeparatorsDialog] = useDialog();
const dialogs = [
{
size: "sm",
title: "Small Dialog",
toggle: toggleHeaderSeparatorDialog,
visible: headerSeparatorDialogOpened,
},
{
size: "md",
title: "Medium Dialog",
toggle: toggleFooterSeparatorDialog,
visible: footerSeparatorDialogOpened,
},
{
size: "lg",
title: "Large Dialog",
toggle: toggleBothSeparatorsDialog,
visible: bothSeparatorsDialogOpened,
},
];
return (
<>
{dialogs.map(({toggle, visible, placement, size, title}, index) => (
))}
);
};
export default DialogFullHeight;