Siddharth
58 lines
2.2 KiB
TypeScript
58 lines
2.2 KiB
TypeScript
import { HelpCircle, Settings2 } from "lucide-react";
|
|
import { useScopedT } from "@/contexts/I18nContext";
|
|
import { useShortcuts } from "@/contexts/ShortcutsContext";
|
|
import { FIXED_SHORTCUTS, formatBinding, SHORTCUT_ACTIONS } from "@/lib/shortcuts";
|
|
|
|
export function KeyboardShortcutsHelp() {
|
|
const { shortcuts, isMac, openConfig } = useShortcuts();
|
|
const t = useScopedT("shortcuts");
|
|
|
|
return (
|
|
<div className="relative group">
|
|
<HelpCircle className="w-4 h-4 text-slate-500 hover:text-[#34B27B] transition-colors cursor-help" />
|
|
|
|
<div className="absolute right-0 top-full mt-2 w-64 bg-[#09090b] border border-white/10 rounded-lg p-3 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 shadow-xl z-50">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-xs font-semibold text-slate-200">{t("title")}</span>
|
|
<button
|
|
type="button"
|
|
onClick={openConfig}
|
|
title="Customize shortcuts"
|
|
className="flex items-center gap-1 text-[10px] text-slate-500 hover:text-[#34B27B] transition-colors"
|
|
>
|
|
<Settings2 className="w-3 h-3" />
|
|
{t("customize")}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-1.5 text-[10px]">
|
|
{SHORTCUT_ACTIONS.map((action) => (
|
|
<div key={action} className="flex items-center justify-between">
|
|
<span className="text-slate-400">{t(`actions.${action}`)}</span>
|
|
<kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">
|
|
{formatBinding(shortcuts[action], isMac)}
|
|
</kbd>
|
|
</div>
|
|
))}
|
|
|
|
<div className="pt-1 border-t border-white/5 mt-1 space-y-1.5">
|
|
{FIXED_SHORTCUTS.map((fixed) => (
|
|
<div key={fixed.label} className="flex items-center justify-between">
|
|
<span className="text-slate-400">{fixed.label}</span>
|
|
<kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">
|
|
{isMac
|
|
? fixed.display
|
|
.replace(/Ctrl/g, "⌘")
|
|
.replace(/Shift/g, "⇧")
|
|
.replace(/Alt/g, "⌥")
|
|
: fixed.display}
|
|
</kbd>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|