import React, { useState } from "react"; // headless ui import { Dialog, Transition } from "@headlessui/react"; // icons import { XMarkIcon } from "@heroicons/react/20/solid"; // ui import { Input } from "ui"; type Props = { isOpen: boolean; setIsOpen: React.Dispatch>; }; const 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,d", description: "To bulk delete issues" }, { keys: "ctrl,h", description: "To open shortcuts guide" }, { keys: "ctrl,alt,c", description: "To copy issue url when on issue detail page.", }, ], }, ]; const ShortcutsModal: React.FC = ({ isOpen, setIsOpen }) => { const [query, setQuery] = useState(""); const filteredShortcuts = shortcuts.filter((shortcut) => shortcut.shortcuts.some((item) => item.description.includes(query.trim())) || query === "" ? true : false ); return (
Keyboard Shortcuts
setQuery(e.target.value)} />
{filteredShortcuts.length > 0 ? ( filteredShortcuts.map(({ title, shortcuts }) => (

{title}

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

{description}

{keys.split(",").map((key, index) => ( {key} ))}
))}
)) ) : (

No shortcuts found for{" "} {`"`} {query} {`"`}

)}
); }; export default ShortcutsModal;