A before/after change list that shows what an agent or automated edit modified, with accept/reject actions to keep or undo it.
import Changes from "@/components/ui/changes";
export default function ChangesDemo() {
return (
<div
style={{
display: "flex",
flexDirection: "column",
gap: "24px",
maxWidth: "620px",
}}
>
<Changes
title="Series B one-pager"
onAccept={() => {}}
onReject={() => {}}
items={[
{
kind: "changed",
label: "Opening line",
before: "Redrob is a recruitment platform for India.",
after: "Redrob builds the last mile of AI.",
},
{
kind: "changed",
label: "Headline figure",
before: "93 people across two countries",
after: "93 people across Korea, India and the United States",
note: "Taken from the March headcount sheet.",
},
{
kind: "added",
label: "Closing paragraph",
after: "A short note on what the next twelve months buy.",
},
{
kind: "removed",
label: "Office list",
before: "The full address block for all three offices.",
},
]}
/>
<Changes
title="Quarterly note"
summary="One change"
items={[
{
kind: "changed",
label: "Date on the cover",
before: "September 2025",
after: "September 2026",
},
]}
/>
</div>
);
}