import { FC, useEffect, useState, Dispatch, SetStateAction, Fragment } from "react"; // headless ui import { Dialog, Transition } from "@headlessui/react"; // icons import { Command, Search, X } from "lucide-react"; // ui import { Input } from "@plane/ui"; type Props = { isOpen: boolean; onClose: () => void; }; const shortcuts = [ { title: "Navigation", shortcuts: [ { keys: "Ctrl,K", description: "To open navigator" }, { keys: "↑", description: "Move up" }, { keys: "↓", description: "Move down" }, { keys: "←", description: "Move left" }, { keys: "→", description: "Move right" }, ], }, { title: "Common", shortcuts: [ { keys: "P", description: "To create project" }, { keys: "C", description: "To create issue" }, { keys: "Q", description: "To create cycle" }, { keys: "M", description: "To create module" }, { keys: "V", description: "To create view" }, { keys: "D", description: "To create page" }, { keys: "Delete", description: "To bulk delete issues" }, { keys: "H", description: "To open shortcuts guide" }, { keys: "Ctrl,Alt,C", description: "To copy issue url when on issue detail page", }, ], }, ]; const allShortcuts = shortcuts.map((i) => i.shortcuts).flat(1); export const ShortcutsModal: FC = (props) => { const { isOpen, onClose } = props; // states const [query, setQuery] = useState(""); // computed const filteredShortcuts = allShortcuts.filter((shortcut) => shortcut.description.toLowerCase().includes(query.trim().toLowerCase()) || query === "" ? true : false ); useEffect(() => { if (!isOpen) setQuery(""); }, [isOpen]); return (
Keyboard Shortcuts
setQuery(e.target.value)} placeholder="Search for shortcuts" className="w-full border-none bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none" />
{query.trim().length > 0 ? ( filteredShortcuts.length > 0 ? ( filteredShortcuts.map((shortcut) => (

{shortcut.description}

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

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

) ) : ( shortcuts.map(({ title, shortcuts }) => (

{title}

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

{description}

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