Alert Dialog

"use client";

import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPopup,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/siteplane/components/alert-dialog";
import { Button } from "@/siteplane/components/button";

export default function Example() {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button variant="outline-destructive" />}>
        Delete project
      </AlertDialogTrigger>
      <AlertDialogPopup>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete project?</AlertDialogTitle>
          <AlertDialogDescription>
            This permanently deletes Website Redesign, including its tasks and
            files. This action can&apos;t be undone.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogClose render={<Button variant="ghost" />}>
            Cancel
          </AlertDialogClose>
          <AlertDialogClose render={<Button variant="destructive" />}>
            Delete project
          </AlertDialogClose>
        </AlertDialogFooter>
      </AlertDialogPopup>
    </AlertDialog>
  );
}

"use client";

import { CircleAlertIcon } from "lucide-react";
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/siteplane/components/alert";
import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPopup,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/siteplane/components/alert-dialog";
import { Button } from "@/siteplane/components/button";
import { MotionReveal } from "@/siteplane/components/motion";
import { useRef, useState } from "react";

// Stands in for the request that deletes the account. Here it fails on the
// first try, so the example shows the error and a retry.
function deleteAccount(fail: boolean): Promise<void> {
  return new Promise((resolve, reject) => {
    window.setTimeout(() => {
      if (fail) reject(new Error("The request failed."));
      else resolve();
    }, 1400);
  });
}

export default function Example() {
  const [open, setOpen] = useState(false);
  const [pending, setPending] = useState(false);
  const [failed, setFailed] = useState(false);
  const attempts = useRef(0);

  return (
    <AlertDialog
      open={open}
      onOpenChange={(nextOpen) => {
        // While the request runs, the confirmation stays open.
        if (!pending) setOpen(nextOpen);
      }}
      onOpenChangeComplete={(isOpen) => {
        // A closed confirmation starts over the next time it opens.
        if (!isOpen) {
          setFailed(false);
          attempts.current = 0;
        }
      }}
    >
      <AlertDialogTrigger render={<Button variant="ghost-destructive" />}>
        Delete account
      </AlertDialogTrigger>
      <AlertDialogPopup>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete your account?</AlertDialogTitle>
          <div>
            <AlertDialogDescription>
              This permanently deletes your account and removes your data from
              our servers. This action can&apos;t be undone.
            </AlertDialogDescription>
            <MotionReveal open={failed}>
              <Alert className="mt-3" variant="error">
                <CircleAlertIcon aria-hidden="true" />
                <AlertTitle>Your account wasn&apos;t deleted</AlertTitle>
                <AlertDescription>
                  The request failed. Try again.
                </AlertDescription>
              </Alert>
            </MotionReveal>
          </div>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogClose
            disabled={pending}
            render={<Button variant="ghost" />}
          >
            Cancel
          </AlertDialogClose>
          <Button
            loading={pending}
            variant="destructive"
            onClick={async () => {
              attempts.current += 1;
              setFailed(false);
              setPending(true);
              try {
                await deleteAccount(attempts.current === 1);
                setOpen(false);
              } catch {
                setFailed(true);
              } finally {
                setPending(false);
              }
            }}
          >
            Delete account
          </Button>
        </AlertDialogFooter>
      </AlertDialogPopup>
    </AlertDialog>
  );
}

"use client";

import {
  AlertDialog,
  AlertDialogClose,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPopup,
  AlertDialogTitle,
} from "@/siteplane/components/alert-dialog";
import { Button } from "@/siteplane/components/button";
import {
  Dialog,
  DialogClose,
  DialogPopup,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogPanel,
  DialogTitle,
  DialogTrigger,
} from "@/siteplane/components/dialog";
import { Field, FieldError, FieldLabel } from "@/siteplane/components/field";
import { Form } from "@/siteplane/components/form";
import { Textarea } from "@/siteplane/components/textarea";
import { useState } from "react";

export default function Example() {
  const [dialogOpen, setDialogOpen] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [comment, setComment] = useState("");

  return (
    <Dialog
      open={dialogOpen}
      onOpenChange={(open) => {
        if (!open && comment) {
          setConfirmOpen(true);
        } else {
          setDialogOpen(open);
        }
      }}
    >
      <DialogTrigger render={<Button variant="outline" />}>
        Add comment
      </DialogTrigger>
      <DialogPopup>
        <Form
          className="contents"
          onSubmit={(event) => {
            event.preventDefault();
            setComment("");
            setDialogOpen(false);
          }}
        >
          <DialogHeader>
            <DialogTitle>New comment</DialogTitle>
            <DialogDescription>
              Everyone on this project can read your comment.
            </DialogDescription>
          </DialogHeader>
          <DialogPanel>
            <Field>
              <FieldLabel>Comment</FieldLabel>
              <Textarea
                value={comment}
                onChange={(event) => setComment(event.target.value)}
                required
              />
              <FieldError match="valueMissing">Enter a comment.</FieldError>
            </Field>
          </DialogPanel>
          <DialogFooter>
            <DialogClose render={<Button variant="ghost" />}>
              Cancel
            </DialogClose>
            <Button type="submit">Post comment</Button>
          </DialogFooter>
        </Form>
      </DialogPopup>
      <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
        <AlertDialogPopup>
          <AlertDialogHeader>
            <AlertDialogTitle>Discard comment?</AlertDialogTitle>
            <AlertDialogDescription>
              Your comment hasn&apos;t been posted and will be lost.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogClose render={<Button variant="ghost" />}>
              Keep editing
            </AlertDialogClose>
            <Button
              variant="destructive"
              onClick={() => {
                setConfirmOpen(false);
                setComment("");
                setDialogOpen(false);
              }}
            >
              Discard
            </Button>
          </AlertDialogFooter>
        </AlertDialogPopup>
      </AlertDialog>
    </Dialog>
  );
}