Menu

import { createMovingHighlight } from "@reuse-sh/interactions";
import "@reuse-sh/interactions/styles.css";

// <div role="menu" class="file-menu">
//   <button role="menuitem" data-reuse-row>New print</button> …
// </div>
const highlight = createMovingHighlight(document.querySelector(".file-menu"));

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

export function FileMenu({ items }) {
  return (
    <MovingHighlight role="menu" className="file-menu">
      {items.map((item) => (
        <button key={item.label} role="menuitem" data-reuse-row onClick={item.run}>
          {item.label}
          <kbd>{item.shortcut}</kbd>
        </button>
      ))}
    </MovingHighlight>
  );
}