import React from "react"; // headless ui import { Dialog, Transition } from "@headlessui/react"; // icons import { XMarkIcon } from "@heroicons/react/20/solid"; type Props = { isOpen: boolean; setIsOpen: React.Dispatch>; }; const ShortcutsModal: React.FC = ({ isOpen, setIsOpen }) => { return (
Keyboard Shortcuts
{[ { title: "Navigation", shortcuts: [ { keys: "ctrl,/", description: "To open navigator" }, { keys: "↑", description: "Move up" }, { keys: "↓", description: "Move down" }, { keys: "←", description: "Move left" }, { keys: "→", description: "Move right" }, { keys: "Enter", description: "Select" }, { keys: "Esc", description: "Close" }, ], }, { title: "Common", shortcuts: [ { keys: "ctrl,p", description: "To create project" }, { keys: "ctrl,i", description: "To create issue" }, { keys: "ctrl,q", description: "To create cycle" }, { keys: "ctrl,m", description: "To create module" }, { keys: "ctrl,h", description: "To open shortcuts guide" }, { keys: "ctrl,alt,c", description: "To copy issue url when on issue detail page.", }, ], }, ].map(({ title, shortcuts }) => (

{title}

{shortcuts.map(({ keys, description }, index) => (

{description}

{keys.split(",").map((key, index) => ( {key} {/* {index !== keys.split(",").length - 1 ? ( + ) : null} */} ))}
))}
))}
); }; export default ShortcutsModal;