Modal

export function DeleteProject() {
  const [open, setOpen] = useState(false)
  const cancelRef = useRef<HTMLButtonElement>(null)

  return (
    <>
      <Button onClick={() => setOpen(true)}>Delete project</Button>
      <Modal
        open={open}
        onClose={() => setOpen(false)}
        initialFocusRef={cancelRef}
        title="Delete atlas-edge?"
        description="This removes the project and cannot be undone."
        size="md"
        footerAlignment="right"
        footer={
          <>
            <Button ref={cancelRef} variant="outline">Cancel</Button>
            <Button variant="destructive">Delete</Button>
          </>
        }
      >
        Four deployments and one custom domain are attached.
      </Modal>
    </>
  )
}