45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { useEffect, useRef } from "react";
|
||
|
||
export function HelpDialog({
|
||
open,
|
||
onClose,
|
||
}: {
|
||
open: boolean;
|
||
onClose: () => void;
|
||
}) {
|
||
const dialog = useRef<HTMLDialogElement>(null);
|
||
useEffect(() => {
|
||
const node = dialog.current;
|
||
if (!node) return;
|
||
if (open && !node.open) node.showModal();
|
||
if (!open && node.open) node.close();
|
||
}, [open]);
|
||
return (
|
||
<dialog
|
||
ref={dialog}
|
||
className="help-dialog"
|
||
onClose={onClose}
|
||
onCancel={onClose}
|
||
aria-labelledby="help-title"
|
||
>
|
||
<div className="dialog-heading">
|
||
<div>
|
||
<p className="eyebrow">Local-first help</p>
|
||
<h2 id="help-title">About Random Tools</h2>
|
||
</div>
|
||
<button type="button" onClick={onClose} aria-label="Close help">
|
||
×
|
||
</button>
|
||
</div>
|
||
<p>
|
||
Generate secure or reproducible random values locally in the browser.
|
||
</p>
|
||
<p>
|
||
Local WebCrypto and seeded generation stay in this browser. RANDOM.ORG
|
||
is contacted only from its separate workspace after explicit consent;
|
||
local sources never fall back to it. Inputs and responses are bounded.
|
||
</p>
|
||
</dialog>
|
||
);
|
||
}
|