/* eslint-disable react/jsx-handler-names */ import React, { useState } from "react" import { Button, Dialog, Flex } from "playbook-ui" const useDialog = (visible = false) => { const [opened, setOpened] = useState(visible) const toggle = () => setOpened(!opened) return [opened, toggle] } const DialogStatus = () => { const [defaultAlertOpened, toggleDefaultAlert] = useDialog() const [cautionAlertOpened, toggleCautionAlert] = useDialog() const [deleteAlertOpened, toggleDeleteAlert] = useDialog() const [infoAlertOpened, toggleInfoAlert] = useDialog() const [successAlertOpened, toggleSuccessAlert] = useDialog() const [errorAlertOpened, toggleErrorAlert] = useDialog() const dialogs = [ { size: "status_size", status: "default", text: "Text explaining why there is an alert", title: "Are you sure?", toggle: toggleDefaultAlert, visible: defaultAlertOpened, buttonOneText:"Yes, Action", buttonTwoText: "No, Cancel" }, { size: "status_size", status: "caution", text: "This is the action you will be taking", title: "Are you sure?", toggle: toggleCautionAlert, visible: cautionAlertOpened, buttonOneText:"Yes, Action", buttonTwoText: "No, Cancel" }, { size: "status_size", status: "delete", text: "You are about to delete ...", title: "Delete", toggle: toggleDeleteAlert, visible: deleteAlertOpened, buttonOneText:"Yes, Delete", buttonTwoText: "No, Cancel" }, { size: "sm", status: "info", text: "Text explaining why there is an alert", title: "Information", toggle: toggleInfoAlert, visible: infoAlertOpened, buttonOneText:"Ok, Thanks!", }, { size: "sm", status: "success", text: "Text explaining what is successful", title: "Success!", toggle: toggleSuccessAlert, visible: successAlertOpened, buttonOneText: "Great!", }, { size: "sm", status: "error", text: "Text explaining the error", title: "Error Message", toggle: toggleErrorAlert, visible: errorAlertOpened, buttonOneText:"Oh no!", }, ] return (
{dialogs.map((dialog) => ( {!dialog.buttonTwoText && ( )} {dialog.buttonTwoText && ( )} ))}
) } export default DialogStatus