Sign to close

"use client";
import * as React from "react";
import { SignToClose } from "@/components/ui/notchset/blocks/sign-to-close";
import { Switch } from "@/components/ui/notchset/switch";

const money = (v: number) => `$${Math.round(v).toLocaleString("en-US")}`;

export default function SignToCloseDemo() {
  const [fails, setFails] = React.useState(false);
  return (
    <div className="flex w-full max-w-[420px] flex-col gap-2">
      <SignToClose
        company="Stripe"
        color="#635bff"
        title="Expansion · EU region"
        stage={{ label: "Proposal", color: "#7c3aed" }}
        lines={[
          { label: "Platform · 120 seats", amount: 129600 },
          { label: "EU data residency", amount: 18000 },
          { label: "Onboarding", amount: 4400, once: true },
        ]}
        signer="Ana Ruiz"
        format={money}
        /* resolve false and the ink stays, the pill doesn't move, and Retry is offered */
        onSign={() => new Promise<boolean>((r) => setTimeout(() => r(!fails), 520))}
        replay
      />
      <label className="flex items-center justify-end gap-2 text-[length:var(--ns-text-small)] text-[var(--ns-ink-3)]">
        Signing fails
        <Switch checked={fails} onCheckedChange={setFails} aria-label="Make signing fail" />
      </label>
    </div>
  );
}