Approval card

"use client";
import * as React from "react";
import { Confirmation, type ConfirmationState } from "@/components/ui/notchset/blocks/confirmation";
import { Button } from "@/components/ui/notchset/button";

export default function ConfirmationDemo() {
  const [state, setState] = React.useState<ConfirmationState>("requested");
  const [reason, setReason] = React.useState<string | undefined>();
  return (
    <div className="flex max-w-[520px] flex-col gap-3">
      <Confirmation
        title="Send 3 emails to the beta list"
        effect={[
          { label: "To", value: "Ana Ruiz, Kofi Mensah, Ines Duarte" },
          { label: "Subject", value: "Our launch moves to Tuesday" },
          { label: "When", value: "As soon as you approve" },
        ]}
        state={state}
        outcome="Sent 3 emails at 4:12 pm (sample: nothing is sent)"
        reason={reason}
        onApprove={() => {
          setState("approving");
          setTimeout(() => setState("approved"), 900);
        }}
        onDeny={(r) => {
          setReason(r);
          setState("denied");
        }}
      />
      {(state === "approved" || state === "denied") && (
        <Button size="sm" variant="ghost" className="self-start" onClick={() => (setState("requested"), setReason(undefined))}>
          Ask again
        </Button>
      )}
    </div>
  );
}