Modals

import { CheckCircle } from "@untitledui/icons"; import { Heading as AriaHeading } from "react-aria-components"; import { Dialog, DialogTrigger, Modal, ModalActions, ModalHeader, ModalOverlay, } from "@parentsquare/squarekit-react-v2/modals"; import { Button } from "@/components/base/buttons/button"; import { FeaturedIcon } from "@/components/foundations/featured-icon/featured-icon"; <DialogTrigger> <Button color="secondary">Open the modal</Button> <ModalOverlay isDismissable> <Modal className="sm:max-w-100"> <Dialog> {({ close }) => ( <> <ModalHeader onClose={close} paddingBottom > <div className="relative w-max"> <FeaturedIcon color="success" size="md" theme="modern" icon={CheckCircle} /> </div> <div className="flex flex-col gap-0.5"> <AriaHeading slot="title" level={2} className="text-md text-primary font-semibold"> Blog post published </AriaHeading> <p className="text-tertiary text-sm">This blog post has been published. Team members will be able to edit this post and republish changes.</p> </div> </ModalHeader> <ModalActions> <Button color="secondary" size="md" onClick={close}> Cancel </Button> <Button color="primary" size="md" onClick={close}> Confirm </Button> </ModalActions> </> )} </Dialog> </Modal> </ModalOverlay> </DialogTrigger>