add ui Box

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;
+}

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)
+}