ui components updates

src/components/Block/index.tsx

@@ -1,21 +1,24 @@
 import s from "./styles.module.css"
 
-import cx from "classnames"
+import classnames from "classnames/bind"
 import { createElement } from "react"
 
+const cx = classnames.bind(s)
+
 export type BlockProps = {
     as?: keyof HTMLElementTagNameMap
     style?: React.CSSProperties
     direction: "horizontal" | "vertical"
     children?: React.ReactNode
+    align?: boolean
 }
 
-export const Block: React.FC<BlockProps> = ({ as = "div", style, direction, ...props }) => {
+export const Block: React.FC<BlockProps> = ({ as = "div", align = false, style, direction, ...props }) => {
     const directionClass = direction === "horizontal"
         ? s.horizontal
         : s.vertical
     const newProps = {
-        className: cx(s.block, directionClass),
+        className: cx(s.block, directionClass, { align }),
         style,
     }
 

src/components/Block/styles.module.css

@@ -5,6 +5,10 @@
     justify-content: flex-start;
 }
 
+.block.align {
+    align-items: center;
+}
+
 .horizontal {
     flex-direction: row;
 }