File size: 1,980 Bytes
f8b5d42 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
import React, { useEffect, useState } from "react";
import { X } from "@phosphor-icons/react";
import { useTranslation } from "react-i18next";
import {
SHORTCUTS,
isMac,
KEYBOARD_SHORTCUTS_HELP_EVENT,
} from "@/utils/keyboardShortcuts";
export default function KeyboardShortcutsHelp() {
const [isOpen, setIsOpen] = useState(false);
const { t } = useTranslation();
useEffect(() => {
window.addEventListener(KEYBOARD_SHORTCUTS_HELP_EVENT, () =>
setIsOpen((prev) => !prev)
);
return () => {
window.removeEventListener(KEYBOARD_SHORTCUTS_HELP_EVENT, () =>
setIsOpen(false)
);
};
}, []);
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
<div className="relative bg-theme-bg-secondary rounded-lg p-6 max-w-2xl w-full mx-4">
<div className="flex justify-between items-center mb-6">
<h2 className="text-xl font-semibold text-white">
{t("keyboard-shortcuts.title")}
</h2>
<button
onClick={() => setIsOpen(false)}
className="text-white hover:text-gray-300"
aria-label="Close"
>
<X size={24} />
</button>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{Object.entries(SHORTCUTS).map(([key, shortcut]) => (
<div
key={key}
className="flex items-center justify-between p-3 bg-theme-bg-hover rounded-lg"
>
<span className="text-white">
{t(`keyboard-shortcuts.shortcuts.${shortcut.translationKey}`)}
</span>
<kbd className="px-2 py-1 bg-theme-bg-secondary text-white rounded border border-gray-600">
{isMac ? key : key.replace("⌘", "Ctrl")}
</kbd>
</div>
))}
</div>
</div>
</div>
);
}
|