52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import { ModalPanel } from './ModalPanel';
|
||
|
||
interface HelpPanelProps {
|
||
open: boolean;
|
||
onClose: () => void;
|
||
}
|
||
|
||
export function HelpPanel({ open, onClose }: HelpPanelProps) {
|
||
if (!open) return null;
|
||
return (
|
||
<ModalPanel
|
||
className="help-panel"
|
||
labelledBy="help-title"
|
||
onClose={onClose}
|
||
>
|
||
<header>
|
||
<div>
|
||
<p className="eyebrow">Toolbox guide</p>
|
||
<h2 id="help-title">Choose and arrange your tools</h2>
|
||
</div>
|
||
<button
|
||
className="close-button"
|
||
type="button"
|
||
aria-label="Close help"
|
||
onClick={onClose}
|
||
>
|
||
×
|
||
</button>
|
||
</header>
|
||
<div className="help-steps">
|
||
<p>
|
||
<strong>Open:</strong> click anywhere on a tool tile that is not a
|
||
control.
|
||
</p>
|
||
<p>
|
||
<strong>Details:</strong> use the light bulb to review privacy,
|
||
requirements, categories, tags, version, and source before opening.
|
||
</p>
|
||
<p>
|
||
<strong>Filter:</strong> search, choose a category, or select a tag
|
||
from a tool's information panel. Select the tag again to clear it.
|
||
</p>
|
||
<p>
|
||
<strong>Arrange:</strong> pin frequently used tools into their own
|
||
section, then drag the grip to reorder. The grip also supports
|
||
keyboard dragging with Space, arrow keys, and Escape.
|
||
</p>
|
||
</div>
|
||
</ModalPanel>
|
||
);
|
||
}
|