| 1 | import { Fragment } from "react"; |
| 2 | import { |
| 3 | formatShortcutCombo, |
| 4 | formatShortcutComboParts, |
| 5 | type ShortcutCombo, |
| 6 | type ShortcutPlatform, |
| 7 | } from "../lib/keyboardShortcuts"; |
| 8 | |
| 9 | export function ShortcutComboDisplay({ |
| 10 | combo, |
| 11 | platform, |
| 12 | as = "span", |
| 13 | className, |
| 14 | }: { |
| 15 | combo: ShortcutCombo; |
| 16 | platform: ShortcutPlatform; |
| 17 | as?: "span" | "kbd"; |
| 18 | className?: string; |
| 19 | }) { |
| 20 | const Tag = as; |
| 21 | const label = formatShortcutCombo(combo, platform); |
| 22 | const parts = formatShortcutComboParts(combo, platform); |
| 23 | const separator = platform === "darwin" ? null : "+"; |
| 24 | return ( |
| 25 | <Tag className={`shortcut-combo${className ? ` ${className}` : ""}`} aria-label={label}> |
| 26 | {parts.map((part, index) => ( |
| 27 | <Fragment key={`${part}-${index}`}> |
| 28 | {index > 0 && separator && ( |
| 29 | <span className="shortcut-combo__separator" aria-hidden="true"> |
| 30 | {separator} |
| 31 | </span> |
| 32 | )} |
| 33 | <span className="shortcut-combo__part">{part}</span> |
| 34 | </Fragment> |
| 35 | ))} |
| 36 | </Tag> |
| 37 | ); |
| 38 | } |
| 39 |