65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
export function ProposalReviewCard({
|
|
title,
|
|
before,
|
|
after,
|
|
onApprove,
|
|
onReject,
|
|
isSubmitting = false,
|
|
}: {
|
|
title: string;
|
|
before: string;
|
|
after: string;
|
|
onApprove?: () => void;
|
|
onReject?: () => void;
|
|
isSubmitting?: boolean;
|
|
}) {
|
|
return (
|
|
<section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-4)" }}>
|
|
<div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}>
|
|
<div style={{ fontWeight: 700 }}>{title}</div>
|
|
<div style={{ display: "flex", gap: "var(--ml-space-2)", alignItems: "center", flexWrap: "wrap" }}>
|
|
<span className="badge">before / after</span>
|
|
{onReject ? (
|
|
<button
|
|
type="button"
|
|
className="surface-muted"
|
|
onClick={onReject}
|
|
disabled={isSubmitting}
|
|
style={{ border: "1px solid var(--ml-border-subtle)", borderRadius: "var(--ml-radius-md)", padding: "8px 12px" }}
|
|
>
|
|
Reject
|
|
</button>
|
|
) : null}
|
|
{onApprove ? (
|
|
<button
|
|
type="button"
|
|
onClick={onApprove}
|
|
disabled={isSubmitting}
|
|
style={{
|
|
border: "none",
|
|
borderRadius: "var(--ml-radius-md)",
|
|
padding: "8px 12px",
|
|
background: "var(--ml-accent-primary)",
|
|
color: "var(--ml-text-primary)",
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
Approve
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "var(--ml-space-4)" }}>
|
|
<div className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}>
|
|
<strong>Before</strong>
|
|
<div style={{ color: "var(--ml-text-secondary)", whiteSpace: "pre-wrap" }}>{before}</div>
|
|
</div>
|
|
<div className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}>
|
|
<strong>After</strong>
|
|
<div style={{ color: "var(--ml-text-secondary)", whiteSpace: "pre-wrap" }}>{after}</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|