37 lines
1.1 KiB
JavaScript
37 lines
1.1 KiB
JavaScript
import React from "react";
|
|
import { Button } from "./ui/button.js";
|
|
|
|
export default function ScenarioDiffDrawer({ base, patch, onClose }) {
|
|
if (!patch) return null;
|
|
const keys = Object.keys(patch);
|
|
|
|
return (
|
|
<div className="fixed inset-x-0 bottom-0 max-h-60 overflow-y-auto bg-white border-t border-gray-300 z-50 p-4 shadow-lg">
|
|
<h4 className="font-semibold mb-3">Scenario changes</h4>
|
|
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="text-left border-b">
|
|
<th className="py-1 pr-4">Field</th>
|
|
<th className="py-1 pr-4">Before</th>
|
|
<th className="py-1">After</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{keys.map(k => (
|
|
<tr key={k} className="border-b last:border-0">
|
|
<td className="py-1 pr-4">{k}</td>
|
|
<td className="py-1 pr-4">{String(base[k] ?? "—")}</td>
|
|
<td className="py-1">{String(patch[k])}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
|
|
<Button onClick={onClose} className="mt-4">
|
|
Close
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|