42 lines
1.0 KiB
TypeScript
42 lines
1.0 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 Time Tools</h2>
|
||
</div>
|
||
<button type="button" onClick={onClose} aria-label="Close help">
|
||
×
|
||
</button>
|
||
</div>
|
||
<p>Work with dates, time zones and recurrences locally in the browser.</p>
|
||
<p>
|
||
All processing is performed in this browser. Imported data is treated as
|
||
untrusted and bounded before parsing.
|
||
</p>
|
||
</dialog>
|
||
);
|
||
}
|