feat(ui): add Menu component

src/components/ui/Menu.d.ts

@@ -0,0 +1,8 @@
+export interface MenuItem {
+  label: string;
+  accelerator?: any;
+}
+
+export interface Props {
+  items: MenuItem[];
+}

src/components/ui/Menu.js

@@ -0,0 +1,34 @@
+import * as React from 'karet';
+import * as U from 'karet.util';
+import * as T from './Menu';
+
+import styles from './Menu.module.scss';
+
+/**
+ * @param {T.Props} props
+ */
+function Menu({ items }) {
+  return (
+    <section className={styles.root}>
+      <ul className={styles.itemList}>
+        {U.thru(
+          items,
+          U.mapElems((it, i) => (
+            <li
+              {...{
+                key: `menuitem-${i}`,
+                className: styles.item,
+              }}
+            >
+              {U.view('label', it)}
+            </li>
+          )),
+        )}
+      </ul>
+    </section>
+  );
+}
+
+export default Menu;
+
+//

src/components/ui/Menu.module.scss

@@ -0,0 +1,19 @@
+.root {
+  border: solid 2px #f00;
+  height: 100%;
+}
+
+.itemList {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+
+.item {
+  border: dashed 1px #f00;
+  margin-right: 0.5rem;
+  padding: 0.25rem 0.5rem;
+}