60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import { Carousel, Modal } from "antd";
|
|
import { useState } from "react";
|
|
import { GlobalHotKeys, KeyMap } from "react-hotkeys";
|
|
|
|
export default function ShortcutHelpModal() {
|
|
const [visible, setVisible] = useState<boolean>(false);
|
|
|
|
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}
|
|
>
|
|
<Carousel autoplay className="text-black bg-black h-[25rem]">
|
|
<div>
|
|
<h3>1</h3>
|
|
</div>
|
|
<div>
|
|
<h3>2</h3>
|
|
</div>
|
|
<div>
|
|
<h3>3</h3>
|
|
</div>
|
|
<div>
|
|
<h3>4</h3>
|
|
</div>
|
|
</Carousel>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|