From c2146e82bb8bb11f143dc0ed7a7da7625434d8f4 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Tue, 6 Sep 2022 20:53:29 +0300
Subject: [PATCH] add ui Box

---
 src/ui/Box/box.module.css | 21 +++++++++++++++++++++
 src/ui/Box/index.tsx      | 31 +++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 src/ui/Box/box.module.css
 create mode 100644 src/ui/Box/index.tsx

diff --git a/src/ui/Box/box.module.css b/src/ui/Box/box.module.css
new file mode 100644
index 00000000..60ac1382
--- /dev/null
+++ b/src/ui/Box/box.module.css
@@ -0,0 +1,21 @@
+.box {
+    display: flex;
+    /* align-items: baseline; */
+    align-items: center;
+
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    flex-direction: row;
+}
+
+.box.wrap {
+    flex-wrap: wrap;
+}
+
+.box.center {
+    justify-content: center;
+}
+
+.box.vertical {
+    flex-direction: column;
+}
diff --git a/src/ui/Box/index.tsx b/src/ui/Box/index.tsx
new file mode 100644
index 00000000..dc3130d7
--- /dev/null
+++ b/src/ui/Box/index.tsx
@@ -0,0 +1,31 @@
+import s from "./box.module.css"
+
+import classnames from "classnames/bind"
+import { createElement } from "react"
+
+const cx = classnames.bind(s)
+
+export type BoxProps = {
+    as?: keyof HTMLElementTagNameMap
+    children?: React.ReactNode
+    style?: React.CSSProperties
+    wrap?: boolean
+    vertical?: boolean
+    center?: boolean
+}
+
+export const Box: React.FC<BoxProps> = ({
+    as = "div",
+    wrap = false,
+    vertical = false,
+    center = false,
+    style,
+    ...props
+}) => {
+    const newProps = {
+        className: cx(s.box, { vertical, center, wrap }),
+        style,
+    }
+
+    return createElement(as, newProps, props.children)
+}