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 DialogFullHeightPlacement = () => {
const [headerSeparatorDialogOpened, toggleHeaderSeparatorDialog] =
useDialog();
const [footerSeparatorDialogOpened, toggleFooterSeparatorDialog] =
useDialog();
const [bothSeparatorsDialogOpened, toggleBothSeparatorsDialog] = useDialog();
const dialogs = [
{
title: "Left Dialog",
toggle: toggleHeaderSeparatorDialog,
visible: headerSeparatorDialogOpened,
placement: "left",
},
{
title: "Center Dialog",
toggle: toggleFooterSeparatorDialog,
visible: footerSeparatorDialogOpened,
},
{
title: "Right Dialog",
toggle: toggleBothSeparatorsDialog,
visible: bothSeparatorsDialogOpened,
placement: "right",
},
];
return (
<>
{dialogs.map(({toggle, visible, placement, title}, index) => (
))}
);
};
export default DialogFullHeightPlacement;