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: [ { key: "Ctrl + /", description: "To open navigator" }, { key: "↑", description: "Move up" }, { key: "↓", description: "Move down" }, { key: "←", description: "Move left" }, { key: "→", description: "Move right" }, { key: "Enter", description: "Select" }, { key: "Esc", description: "Close" }, ], }, { title: "Common", shortcuts: [ { key: "Ctrl + p", description: "To open create project modal" }, { key: "Ctrl + i", description: "To open create issue modal" }, { key: "Ctrl + q", description: "To open create cycle modal" }, { key: "Ctrl + h", description: "To open shortcuts guide" }, { key: "Ctrl + alt + c", description: "To copy issue url when on issue detail page.", }, ], }, ].map(({ title, shortcuts }) => (

{title}

{shortcuts.map(({ key, description }) => (

{description}

{key}
))}
))}
); }; export default ShortcutsModal;