mirror of
https://github.com/zen-browser/docs.git
synced 2025-07-07 08:55:33 +02:00
Moved KeyboardShortcut component to src directory (#191)
This commit is contained in:
parent
96037b5625
commit
33799819ab
13 changed files with 11 additions and 14 deletions
62
src/components/KeyboardShortcut.tsx
Normal file
62
src/components/KeyboardShortcut.tsx
Normal file
|
@ -0,0 +1,62 @@
|
|||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
interface KeyboardShortcutProps {
|
||||
shortcut: string;
|
||||
macosShortcut?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const KeyboardShortcut: React.FC<KeyboardShortcutProps> = ({
|
||||
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(/(?<!⌘ )Ctrl/gi, "⌘");
|
||||
convertedShortcut = convertedShortcut.replace(/(?<!⌥ )Alt/gi, "⌥");
|
||||
setDisplayShortcut(convertedShortcut);
|
||||
}
|
||||
} else {
|
||||
// For non-Mac users, display the original shortcut or Windows/Linux specific if ever needed
|
||||
setDisplayShortcut(shortcut);
|
||||
}
|
||||
}, [shortcut, macosShortcut]);
|
||||
|
||||
const keys = displayShortcut.split(/\s*\+\s*/);
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center ${className || ""}`}>
|
||||
{keys.map((key, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<kbd className="px-1 py-0.5 text-xs font-semibold text-fd-foreground bg-fd-card border border-fd-border rounded-sm">
|
||||
{key.toLowerCase() === "shift" ? "⇧" : key}
|
||||
</kbd>
|
||||
{index < keys.length - 1 && <span className="mx-1">+</span>}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default KeyboardShortcut;
|
Loading…
Add table
Add a link
Reference in a new issue