@primer/react/lib-esm/KeybindingHint/components/Key.js

An implementation of GitHub's Primer Design System using React

import React from 'react';
import VisuallyHidden from '../../_VisuallyHidden.js';
import { accessibleKeyName, condensedKeyName, fullKeyName } from '../key-names.js';
import { useIsMacOS } from '../../hooks/useIsMacOS.js';

/** Renders a single key with accessible alternative text. */
const Key = ({
  name,
  format
}) => {
  const isMacOS = useIsMacOS();
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, accessibleKeyName(name, isMacOS)), /*#__PURE__*/React.createElement("span", {
    "aria-hidden": true
  }, format === 'condensed' ? condensedKeyName(name, isMacOS) : fullKeyName(name, isMacOS)));
};

export { Key };