From ea87b50a83387af3dd2c49037b5aa7014db440a3 Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Sat, 27 Jul 2019 18:36:35 +0700
Subject: [PATCH] MenuButton

---
 src/components/node/MenuButton/index.tsx      | 33 +++++++++++
 src/components/node/MenuButton/styles.scss    | 28 +++++++++
 .../examples/ImageExample/index.tsx           | 58 +++++--------------
 .../examples/ImageExample/styles.scss         | 27 ---------
 4 files changed, 77 insertions(+), 69 deletions(-)
 create mode 100644 src/components/node/MenuButton/index.tsx
 create mode 100644 src/components/node/MenuButton/styles.scss

diff --git a/src/components/node/MenuButton/index.tsx b/src/components/node/MenuButton/index.tsx
new file mode 100644
index 00000000..c16f6c89
--- /dev/null
+++ b/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 };
diff --git a/src/components/node/MenuButton/styles.scss b/src/components/node/MenuButton/styles.scss
new file mode 100644
index 00000000..2c781d91
--- /dev/null
+++ b/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;
+}
diff --git a/src/containers/examples/ImageExample/index.tsx b/src/containers/examples/ImageExample/index.tsx
index d7884953..2ab6b051 100644
--- a/src/containers/examples/ImageExample/index.tsx
+++ b/src/containers/examples/ImageExample/index.tsx
@@ -6,11 +6,9 @@ import { Padder } from "~/components/containers/Padder";
 import range from 'ramda/es/range';
 import { Comment } from "~/components/node/Comment";
 import { NodePanel } from "~/components/node/NodePanel";
-import { Filler } from "~/components/containers/Filler";
-import { Tag } from "~/components/node/Tag";
-import { TagField } from "~/components/containers/TagField";
-import {NodeRelated} from "~/components/node/NodeRelated";
-import {Tags} from "~/components/node/Tags";
+import { NodeRelated } from "~/components/node/NodeRelated";
+import { Tags } from "~/components/node/Tags";
+import { MenuButton } from "~/components/node/MenuButton";
 
 interface IProps {}
 
@@ -19,10 +17,6 @@ const ImageExample: FC<IProps> = () => (
       <div
         className={styles.image_container}
       >
-        {
-          // http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg
-          // http://37.192.131.144/full/photos/photo-20120702-99383.jpg
-        }
         <img className={styles.image} src="http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg" />
       </div>
 
@@ -45,41 +39,21 @@ const ImageExample: FC<IProps> = () => (
               <Group style={{ flex: 1 }}>
                 <Padder className={styles.buttons}>
                   <Group>
-                    <div className={styles.button}>
-                      <Group horizontal>
-                        <div className={styles.button_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>
+                    <MenuButton
+                      title="На главной"
+                      description="плывет по течению"
+                      icon="star"
+                    />
 
-                        <Filler>
-                          <div className={styles.button_title}>На главной</div>
-                        </Filler>
-                      </Group>
-                    </div>
+                    <MenuButton
+                      title="Видно всем"
+                      icon="star"
+                    />
 
-                    <div className={styles.button}>
-                      <Group horizontal>
-                        <div className={styles.button_icon}>
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"/></svg>
-                        </div>
-
-                        <Filler>
-                          <div className={styles.button_title}>Видно всем</div>
-                        </Filler>
-                      </Group>
-                    </div>
-
-                    <div className={styles.button}>
-                      <Group horizontal>
-                        <div className={styles.button_icon}>
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z"/><path d="M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"/></svg>
-                        </div>
-
-                        <Filler>
-                          <div className={styles.button_title}>Редактировать</div>
-                        </Filler>
-                      </Group>
-                    </div>
+                    <MenuButton
+                      title="Редактировать"
+                      icon="star"
+                    />
                   </Group>
                 </Padder>
 
diff --git a/src/containers/examples/ImageExample/styles.scss b/src/containers/examples/ImageExample/styles.scss
index 3245a833..5c5bcb08 100644
--- a/src/containers/examples/ImageExample/styles.scss
+++ b/src/containers/examples/ImageExample/styles.scss
@@ -45,30 +45,3 @@
   //position: relative;
   //top: -64px
 }
-
-.button {
-  fill: white;
-  height: 48px;
-  display: flex;
-  align-items: center;
-}
-
-.button_icon {
-  flex: 0 0 38px;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-}
-
-.button_title {
-  font: $font_16_semibold;
-  text-transform: uppercase;
-  margin-bottom: 2px;
-  white-space: nowrap;
-  flex: 1;
-}
-
-.button_desc {
-  font: $font_12_regular;
-  color: transparentize(white, 0.7);
-}