Toolbar shortcuts

Each button's hint names the action and its shortcut, so the toolbar teaches the keyboard as you use it.

import { createFloatingTooltip } from "@reuse-sh/interactions";

// The hint comes from a template next to the button.
// <button aria-label="Duplicate" data-reuse-tooltip-template="tip-duplicate">…</button>
// <template id="tip-duplicate">Duplicate <kbd>⌘D</kbd></template>
createFloatingTooltip(document.querySelector(".editor-toolbar"), { tilt: 5 });

import { FloatingTooltipGroup } from "@reuse-sh/interactions/react";

export function EditorToolbar() {
  return (
    <FloatingTooltipGroup className="editor-toolbar" tilt={5}>
      <button aria-label="Duplicate" data-reuse-tooltip-template="tip-duplicate"><LayersIcon /></button>
      <template
        id="tip-duplicate"
        dangerouslySetInnerHTML={{ __html: "Duplicate <kbd>⌘D</kbd>" }}
      />
    </FloatingTooltipGroup>
  );
}