DiffAIPro

import { Diff, DiffHeader, DiffStat, DiffTitle } from "@/components/ui/diff"
const before = `subject: Invoice {{invoice.number}} is overduefrom: ar@ledgerline.appdelay_days: 7tone: firm
Hi {{contact.first_name}},Invoice {{invoice.number}} for {{invoice.total}} is now overdue.Please pay it as soon as possible.`
const after = `subject: A reminder about invoice {{invoice.number}}from: ar@ledgerline.appdelay_days: 10tone: friendly
Hi {{contact.first_name}},Invoice {{invoice.number}} for {{invoice.total}} was due on {{invoice.due_date}}.You can pay it in a minute with the link below.Reply to this email if anything looks wrong.`
export default function DiffInline() {  return (    <Diff before={before} after={after} lineNumbers className="mx-auto max-w-2xl self-start">      <DiffHeader>        <DiffTitle>second-notice.tmpl</DiffTitle>        <DiffStat />      </DiffHeader>    </Diff>  )}

import { Diff, DiffHeader, DiffStat, DiffTitle } from "@/components/ui/diff"
const before = `Technicians must check in at the site office on arrival.Visits over 2 hours need a supervisor sign off.Parts under $200 can be bought on the company card.Photos are optional for completed jobs.`
const after = `Technicians check in through the app on arrival.Visits over 2 hours need a supervisor sign off.Parts under $350 can be bought on the company card.Upload at least 2 photos before closing a job.`
export default function DiffSplit() {  return (    <Diff before={before} after={after} mode="split" variant="prose" lineNumbers className="mx-auto max-w-3xl self-start">      <DiffHeader>        <DiffTitle>Field policy, version 4 to 5</DiffTitle>        <DiffStat />      </DiffHeader>    </Diff>  )}

import { DiffText } from "@/components/ui/diff"
export default function DiffProse() {  return (    <div className="flex w-full max-w-xl flex-col gap-4 text-[0.9375rem] leading-7">      <p>        <DiffText          before="Close for Q3 is basically done. We're still waiting on 3 vendor credits, which means accounts payable is a little higher than it should be."          after="Close for Q3 is substantially complete. We are still waiting on 3 vendor credits, so accounts payable is temporarily overstated."        />      </p>      <p className="border-t pt-4 text-muted-foreground">        <span className="text-foreground">          <DiffText            showRemoved={false}            before="The Team plan grew faster then we expected."            after="The Team plan grew faster than we expected after the July price change."          />        </span>{" "}        With showRemoved off, only additions are marked.      </p>    </div>  )}