From 0a8e0463bce1c37847f914d84fd6816b4fa8f0ff Mon Sep 17 00:00:00 2001
From: Stefan Rimaila <stefan@rimaila.fi>
Date: Sat, 5 Oct 2019 01:12:56 +0300
Subject: [PATCH] feat(ui): add Menu component

---
 src/components/ui/Menu.d.ts        |  8 +++++++
 src/components/ui/Menu.js          | 34 ++++++++++++++++++++++++++++++
 src/components/ui/Menu.module.scss | 19 +++++++++++++++++
 3 files changed, 61 insertions(+)
 create mode 100644 src/components/ui/Menu.d.ts
 create mode 100644 src/components/ui/Menu.js
 create mode 100644 src/components/ui/Menu.module.scss

diff --git a/src/components/ui/Menu.d.ts b/src/components/ui/Menu.d.ts
new file mode 100644
index 0000000..c0ea08b
--- /dev/null
+++ b/src/components/ui/Menu.d.ts
@@ -0,0 +1,8 @@
+export interface MenuItem {
+  label: string;
+  accelerator?: any;
+}
+
+export interface Props {
+  items: MenuItem[];
+}
diff --git a/src/components/ui/Menu.js b/src/components/ui/Menu.js
new file mode 100644
index 0000000..efd16e4
--- /dev/null
+++ b/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;
+
+//
diff --git a/src/components/ui/Menu.module.scss b/src/components/ui/Menu.module.scss
new file mode 100644
index 0000000..24585c6
--- /dev/null
+++ b/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;
+}