40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import { useEffect, useRef } from 'react';
|
|
|
|
interface ConfirmationDialogProps {
|
|
action: 'start' | 'stop';
|
|
isPending: boolean;
|
|
onCancel(): void;
|
|
onConfirm(): void;
|
|
}
|
|
|
|
export function ConfirmationDialog({ action, isPending, onCancel, onConfirm }: ConfirmationDialogProps) {
|
|
const cancelButtonRef = useRef<HTMLButtonElement>(null);
|
|
const isStarting = action === 'start';
|
|
|
|
useEffect(() => {
|
|
cancelButtonRef.current?.focus();
|
|
}, []);
|
|
|
|
return (
|
|
<div aria-labelledby="confirmation-title" aria-modal="true" className="dialog-backdrop" role="dialog">
|
|
<div className="dialog-card">
|
|
<span className="eyebrow">Confirm action</span>
|
|
<h2 id="confirmation-title">{isStarting ? 'Start bot?' : 'Stop bot?'}</h2>
|
|
<p>
|
|
{isStarting
|
|
? 'The bot will resume automated processing.'
|
|
: 'The bot will pause after its current operation.'}
|
|
</p>
|
|
<div className="dialog-actions">
|
|
<button className="button secondary" disabled={isPending} onClick={onCancel} ref={cancelButtonRef} type="button">
|
|
Cancel
|
|
</button>
|
|
<button className={isStarting ? 'button primary' : 'button danger'} disabled={isPending} onClick={onConfirm} type="button">
|
|
{isPending ? 'Applying…' : `Confirm ${action}`}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|