Code listing

"use client"

import { CodeListing } from "@/components/candor/code-listing"

const before = `export async function refund(orderId: string) {
  const order = await db.orders.find(orderId)
  return payments.refund(order.chargeId, order.total)
}
`

const after = `export async function refund(orderId: string) {
  const order = await db.orders.find(orderId)
  // Only settled orders can be refunded
  if (order.status !== "settled") return { ok: false, reason: "not settled" }
  return payments.refund(order.chargeId, order.total)
}
`

const excerpt = `  const rows = await db.query(sql, [workspaceId])
  for (const row of rows) {
    await notify(row.ownerEmail, template.render(row))
  }`

export default function Example() {
  return (
    <div className="flex max-w-2xl flex-col gap-4">
      {/* previous adds the Code / Changes switch; highlights mark lines with the app's reason. */}
      <CodeListing
        highlight
        language="ts"
        title="src/refund.ts"
        code={after}
        previous={before}
        highlights={[{ from: 3, to: 4, reason: "The guard the agent added" }]}
      />
      {/* An excerpt from further down a file: startLine numbers it from there. */}
      <CodeListing language="ts" title="jobs/notify.ts" code={excerpt} startLine={118} highlights={[{ from: 120, reason: "One email per row, with no limit" }]} />
    </div>
  )
}