Function alertDialogExampleCode

components/docs/examples/alert-dialog-example.tsx:48–89

(
  values: Record<string, unknown> = {},
)

        actionLabel={p.actionLabel ?? "Delete"}
        cancelLabel={p.cancelLabel ?? "Cancel"}
        style={dialog}
      />
    </>
  );
};

export const alertDialogExampleCode = (
  values: Record<string, unknown> = {},
): string => {
  const title = values.title as string | undefined;
  const description = values.description as string | undefined;
  const actionLabel = values.actionLabel as string | undefined;
  const cancelLabel = values.cancelLabel as string | undefined;

  const alertDialogProps: string[] = [];
  if (title !== undefined && title !== "Delete account?")
    alertDialogProps.push(`title="${title}"`);
  if (
    description !== undefined &&
    description !==
      "This action cannot be undone. This will permanently remove your data from our servers."
  )
    alertDialogProps.push(`description="${description}"`);
  if (actionLabel !== undefined && actionLabel !== "Delete")
    alertDialogProps.push(`actionLabel="${actionLabel}"`);
  if (cancelLabel !== undefined && cancelLabel !== "Cancel")
    alertDialogProps.push(`cancelLabel="${cancelLabel}"`);

  const alertDialogPropsStr = alertDialogProps.length
    ? ` ${alertDialogProps.join(" ")}`
    : "";

  return `import { AlertDialog } from "@/components/remocn/alert-dialog";
import { useAlertDialogTransition } from "@/components/remocn/use-alert-dialog-transition";
import { Button } from "@/components/remocn/button";
import { useButtonTransition } from "@/components/remocn/use-button-transition";

export const Scene = () => {
  const trigger = useButtonTransition(
    [
      { at: 14, state: "hover" },
      { at: 26, state: "press" },
    ],
    { variant: "destructive" },
  );