"use client"; import React, { useEffect, useState } from "react"; interface KeyboardShortcutProps { shortcut: string; macosShortcut?: string; className?: string; } const KeyboardShortcut: React.FC = ({ shortcut, macosShortcut, className, }) => { const [displayShortcut, setDisplayShortcut] = useState(shortcut); useEffect(() => { // OS detection should run only on the client-side const isMacUser = navigator.platform.toUpperCase().indexOf("MAC") >= 0; if (isMacUser) { if (macosShortcut) { setDisplayShortcut(macosShortcut); } else { // Convert common Windows/Linux keys to macOS equivalents let convertedShortcut = shortcut; convertedShortcut = convertedShortcut.replace(/Ctrl\s*\+\s*/gi, "⌘ + "); convertedShortcut = convertedShortcut.replace(/Alt\s*\+\s*/gi, "⌥ + "); convertedShortcut = convertedShortcut.replace(/Cmd\s*\+\s*/gi, "⌘ + "); // In case Cmd was used in the base shortcut convertedShortcut = convertedShortcut.replace( /Option\s*\+\s*/gi, "⌥ + " ); // In case Option was used // Replace individual keys if not part of a combo already handled convertedShortcut = convertedShortcut.replace(/(? {keys.map((key, index) => ( {key.toLowerCase() === "shift" ? "⇧" : key.toLowerCase() === "plus" ? "+" : key} {index < keys.length - 1 && +} ))} ); }; export default KeyboardShortcut;