components uses css modules; other refactoring

src/components/Block/index.tsx

@@ -1,4 +1,4 @@
-import './styles.css'
+import s from './styles.module.css'
 
 import cx from 'classnames'
 import { createElement } from 'react'
@@ -10,7 +10,13 @@ export type BlockProps = {
 }
 
 export const Block: React.FC<BlockProps> = ({ as = 'div', style, direction, ...props }) => {
-    const newProps = { className: cx('block', direction), style }
+    const directionClass = direction === 'horizontal'
+        ? s.horizontal
+        : s.vertical
+    const newProps = {
+        className: cx(s.block, directionClass),
+        style,
+    }
 
     return createElement(as, newProps, props.children)
 }

src/components/Block/styles.module.css

@@ -5,10 +5,10 @@
     justify-content: flex-start;
 }
 
-.block.horizontal {
+.horizontal {
     flex-direction: row;
 }
 
-.block.vertical {
+.vertical {
     flex-direction: column;
 }