Alert Dialog

<AlertDialog.Root>
  <AlertDialog.Trigger asChild>
    <Button variant="destructive">
      Delete Account
    </Button>
  </AlertDialog.Trigger>
  <AlertDialog.Portal>
    <AlertDialog.Overlay className="AlertDialogOverlay" />
    <AlertDialog.Content className="AlertDialogContent">
      <AlertDialog.Title className="AlertDialogTitle">
        <p>
          Are you absolutely sure?
        </p>
      </AlertDialog.Title>
      <AlertDialog.Description className="AlertDialogDescription">
        <p>
          This action cannot be undone. This will permanently delete your
          account and remove your data from our servers.
        </p>
      </AlertDialog.Description>
      <div
        className="mt-2"
        style={{
          display: 'flex',
          gap: 25,
          justifyContent: 'flex-end'
        }}
      >
        <AlertDialog.Cancel asChild>
          <button className="Button mauve">
            Cancel
          </button>
        </AlertDialog.Cancel>
        <AlertDialog.Action asChild>
          <button className="Button red">
            Yes, delete account
          </button>
        </AlertDialog.Action>
      </div>
    </AlertDialog.Content>
  </AlertDialog.Portal>
</AlertDialog.Root>