MenuButton

src/components/node/MenuButton/index.tsx

@@ -0,0 +1,33 @@
+import React, {FC} from 'react';
+import * as styles from './styles.scss';
+import { Group } from "~/components/containers/Group";
+import { Filler } from "~/components/containers/Filler";
+
+interface IProps {
+  title: string;
+  description?: string;
+  icon: string;
+}
+
+const MenuButton: FC<IProps> = ({
+  title,
+  icon,
+  description,
+}) => (
+  <div
+    className={styles.button}
+  >
+    <Group horizontal>
+      <div className={styles.icon}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/></svg>
+      </div>
+
+      <Filler>
+        <div className={styles.title}>{title}</div>
+        { description && <div className={styles.description}>{description}</div> }
+      </Filler>
+    </Group>
+  </div>
+);
+
+export { MenuButton };

src/components/node/MenuButton/styles.scss

@@ -0,0 +1,28 @@
+
+.button {
+  fill: white;
+  height: 48px;
+  display: flex;
+  align-items: center;
+}
+
+.icon {
+  flex: 0 0 38px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.title {
+  font: $font_16_semibold;
+  text-transform: uppercase;
+  margin-bottom: 2px;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.description {
+  font: $font_12_regular;
+  color: transparentize(white, 0.6);
+  white-space: nowrap;
+}