`src/components/ui/diff-viewer.tsx`

30 lines
'use client'

interface DiffViewerProps {
  before: string
  after: string
}

export function DiffViewer({ before, after }: DiffViewerProps) {
  return (
    <div className="grid gap-4 md:grid-cols-2">
      <div className="overflow-hidden rounded-lg border border-red-200">
        <div className="border-b border-red-200 bg-red-50 px-4 py-2">
          <span className="text-sm font-medium text-red-700">Before</span>
        </div>
        <pre className="overflow-x-auto bg-red-50/30 p-4 text-sm text-slate-700">
          <code>{before || '(empty)'}</code>
        </pre>
      </div>
      <div className="overflow-hidden rounded-lg border border-green-200">
        <div className="border-b border-green-200 bg-green-50 px-4 py-2">
          <span className="text-sm font-medium text-green-700">After</span>
        </div>
        <pre className="overflow-x-auto bg-green-50/30 p-4 text-sm text-slate-700">
          <code>{after || '(empty)'}</code>
        </pre>
      </div>
    </div>
  )
}