37 lines
1.7 KiB
TypeScript
37 lines
1.7 KiB
TypeScript
|
import React from 'react';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
open: boolean;
|
||
|
|
pendingMessage?: string;
|
||
|
|
onConfirm: () => void;
|
||
|
|
onCancel: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const ScopeConfirmDialog: React.FC<Props> = ({ open, pendingMessage, onConfirm, onCancel }) => {
|
||
|
|
if (!open) return null;
|
||
|
|
const overlay: React.CSSProperties = { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', zIndex: 10000, display: 'flex', alignItems: 'center', justifyContent: 'center' };
|
||
|
|
const box: React.CSSProperties = { background: '#1a1a2e', border: '1px solid #3f3f46', borderRadius: 10, padding: 22, maxWidth: 480, color: '#fff' };
|
||
|
|
const cancel: React.CSSProperties = { background: '#27272a', color: '#fff', border: 'none', padding: '8px 14px', borderRadius: 6, cursor: 'pointer' };
|
||
|
|
const ok: React.CSSProperties = { background: '#b91c1c', color: '#fff', border: 'none', padding: '8px 14px', borderRadius: 6, cursor: 'pointer' };
|
||
|
|
return (
|
||
|
|
<div role="dialog" aria-modal="true" style={overlay}>
|
||
|
|
<div style={box}>
|
||
|
|
<h3 style={{ margin: 0 }}>Replace your entire site?</h3>
|
||
|
|
<p style={{ color: '#cbd5e1', fontSize: 14 }}>
|
||
|
|
Sitesmith will replace every page, your header, and your footer with the new design.
|
||
|
|
Manual edits will be lost.
|
||
|
|
</p>
|
||
|
|
{pendingMessage && (
|
||
|
|
<blockquote style={{ borderLeft: '3px solid #7c3aed', paddingLeft: 12, color: '#a5b4fc', fontSize: 13 }}>
|
||
|
|
{pendingMessage}
|
||
|
|
</blockquote>
|
||
|
|
)}
|
||
|
|
<div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 14 }}>
|
||
|
|
<button onClick={onCancel} style={cancel}>Cancel</button>
|
||
|
|
<button onClick={onConfirm} style={ok}>Replace site</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|