Arjun Patel
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import { Modal } from "antd";
|
|
import { useState } from "react";
|
|
import { GlobalHotKeys, KeyMap } from "react-hotkeys";
|
|
|
|
export default function ShortcutHelpModal() {
|
|
const [visible, setVisible] = useState<boolean>(true);
|
|
|
|
function handleToggleModal() {
|
|
setVisible((pv) => !pv);
|
|
}
|
|
|
|
const keyMap: KeyMap = {
|
|
SHOW_HELP_MODAL: "/",
|
|
};
|
|
const handlers = { SHOW_HELP_MODAL: handleToggleModal };
|
|
|
|
return (
|
|
<>
|
|
{/* fixed help on bottom left */}
|
|
<span
|
|
onClick={handleToggleModal}
|
|
className="hover:cursor-pointer fixed bottom-10 right-10 bg-gray-200 bg-opacity-80 py-2 px-3 rounded text-gray-500 flex flex-row items-center space-x-2"
|
|
>
|
|
<span>Help</span>
|
|
|
|
<button
|
|
className={`right-1 rounded-lg py-1 px-2 ml-1
|
|
shadow-md text-center text-gray-500 text-sm font-bold`}
|
|
>
|
|
/
|
|
</button>
|
|
</span>
|
|
|
|
<GlobalHotKeys keyMap={keyMap} handlers={handlers} />
|
|
|
|
<Modal
|
|
title="Help"
|
|
visible={visible}
|
|
onCancel={handleToggleModal}
|
|
onOk={handleToggleModal}
|
|
></Modal>
|
|
</>
|
|
);
|
|
}
|