From 8ed1e65055082ca627d353ccf7b7357253727f06 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Tue, 18 Feb 2020 15:49:12 +0300
Subject: [PATCH] block style refactoring

---
 src/components/Block/index.tsx  | 28 ++++------------------------
 src/components/Block/styles.css | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Block/styles.css

diff --git a/src/components/Block/index.tsx b/src/components/Block/index.tsx
index add00e6b..75c5c64c 100644
--- a/src/components/Block/index.tsx
+++ b/src/components/Block/index.tsx
@@ -1,3 +1,5 @@
+import './styles.css'
+
 import cx from 'classnames'
 import { createElement } from 'react'
 
@@ -8,29 +10,7 @@ export type BlockProps = {
 }
 
 export const Block: React.FC<BlockProps> = ({ as = 'div', style, direction, ...props }) => {
-    const newProps = { className: cx(direction), style }
-    const children = (
-        <>
-            <style jsx>{`
-                div {
-                    display: flex;
-                    flex-wrap: wrap;
-                    align-items: baseline;
-                    justify-content: flex-start;
-                }
+    const newProps = { className: cx('block', direction), style }
 
-                .horizontal {
-                    flex-direction: row;
-                }
-
-                .vertical {
-                    flex-direction: column;
-                }
-            `}</style>
-
-            {props.children}
-        </>
-    )
-
-    return createElement(as, newProps, children)
+    return createElement(as, newProps, props.children)
 }
diff --git a/src/components/Block/styles.css b/src/components/Block/styles.css
new file mode 100644
index 00000000..13b9cb72
--- /dev/null
+++ b/src/components/Block/styles.css
@@ -0,0 +1,14 @@
+.block {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: flex-start;
+}
+
+.block.horizontal {
+    flex-direction: row;
+}
+
+.block.vertical {
+    flex-direction: column;
+}