A per-field list of pending changes to a form, showing the old and new value side by side with set/removed callouts and a per-field revert action, used as a review step before submitting edits.
"use client";
import DiffSummary from "@/components/ui/diff-summary";
import type { FieldChange } from "@/components/ui/diff-summary";
import { Surface } from "@/components/ui/diff-summary-utils/surface";
import { Text } from "@/components/ui/diff-summary-utils/text";
import { useState } from "react";
const CHANGES: FieldChange[] = [
{
field: "limit",
label: "Daily limit",
from: "$500",
to: "$5,000",
note: "A ten-fold rise. Two approvals are needed.",
},
{
field: "reference",
label: "Reference",
from: "September rent",
to: "October rent",
},
{
field: "notify",
label: "Notify by",
from: "Email",
to: "Email and push",
added: false,
},
{ field: "nickname", label: "Nickname", from: "Rent account", removed: true },
{ field: "category", label: "Category", to: "Housing", added: true },
];
export default function DiffSummaryDemo() {
const [changes, setChanges] = useState(CHANGES);
return (
<div className="flex w-full max-w-xl flex-col gap-3 bg-background p-6 text-foreground">
<Surface variant="card" padding="lg" className="items-start gap-3">
<Text size="heading">Review before sending</Text>
<DiffSummary
changes={changes}
label="Changes to review"
onRevert={(field) =>
setChanges((current) =>
current.filter((change) => change.field !== field),
)
}
/>
<div className="flex gap-2">
<button
type="button"
disabled={changes.length === 0}
className="inline-flex h-8 shrink-0 items-center justify-center gap-2 rounded-full bg-accent px-3.5 text-[12px] font-semibold leading-none text-accent-ink transition-colors hover:bg-accent-strong disabled:pointer-events-none disabled:opacity-40"
>
Submit for approval
</button>
<button
type="button"
onClick={() => setChanges(CHANGES)}
className="inline-flex h-8 shrink-0 items-center justify-center gap-2 rounded-full px-3.5 text-[12px] font-semibold leading-none text-ink-soft transition-colors hover:bg-surface-muted hover:text-ink"
>
Reset
</button>
</div>
</Surface>
<Text
size="caption"
tone="faint"
leading="normal"
className="max-w-[68ch]"
>
Reverting is per field. A single Discard forces an all-or-nothing
decision on someone who has spotted one mistake among five deliberate
edits — which is why that person retypes everything instead.
</Text>
</div>
);
}