From 671f737d2597b1281d59baba7b1789275d1294b3 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Tue, 6 Sep 2022 21:08:55 +0300
Subject: [PATCH] use Box instead of Block

---
 src/components/App/index.tsx           | 10 +++++-----
 src/components/Block/index.tsx         | 26 --------------------------
 src/components/Block/styles.module.css | 18 ------------------
 src/components/Footer/index.tsx        | 16 ++++++++--------
 src/components/PageGrid/index.tsx      |  8 +++-----
 5 files changed, 16 insertions(+), 62 deletions(-)
 delete mode 100644 src/components/Block/index.tsx
 delete mode 100644 src/components/Block/styles.module.css

diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index b43729eb..47ff5366 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -3,13 +3,13 @@ import { ConfigContext } from "src/context/ConfigContext"
 import config from "src/config"
 import { Footer } from "../Footer"
 import { Content } from "../Content"
-import { Block } from "../Block"
 import { Breadcrumbs } from "../Breadcrumbs"
 import { IBreadcumbsPart, IMenu } from "src/types"
 import { useRouter } from "next/router"
 import { useMobile } from "src/hooks/useMobile"
 import { Gosuslugi } from "../Gosuslugi"
 import { Navigation } from "@/components/Navigation"
+import { Box } from "@/ui/Box"
 
 export type AppProps = {
     showAuthor?: boolean
@@ -38,14 +38,14 @@ export const App: React.FC<AppProps> = ({ showAuthor = false, menu, ...props })
                             // margin: "0 var(--size-m) var(--size-m)",
                         }} />
                         {hideBreadcrumbs || !props.breadcrumbs ? null : (
-                            <Block direction={"horizontal"} style={blockStyle}>
+                            <Box style={blockStyle}>
                                 <Content>
                                     <Breadcrumbs
                                         items={props.breadcrumbs}
                                         path={router.asPath}
                                     />
                                 </Content>
-                            </Block>
+                            </Box>
                         )}
                     </header>
                 )}
@@ -64,11 +64,11 @@ export const App: React.FC<AppProps> = ({ showAuthor = false, menu, ...props })
                     </Footer>
                 )}
             >
-                <Block direction={"horizontal"} style={blockStyle}>
+                <Box style={blockStyle}>
                     <Content style={props.contentStyle}>
                         {props.children}
                     </Content>
-                </Block>
+                </Box>
             </Wrapper>
         </ConfigContext.Provider>
     )
diff --git a/src/components/Block/index.tsx b/src/components/Block/index.tsx
deleted file mode 100644
index ac214506..00000000
--- a/src/components/Block/index.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import s from "./styles.module.css"
-
-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", align = false, style, direction, ...props }) => {
-    const directionClass = direction === "horizontal"
-        ? s.horizontal
-        : s.vertical
-    const newProps = {
-        className: cx(s.block, directionClass, { align }),
-        style,
-    }
-
-    return createElement(as, newProps, props.children)
-}
diff --git a/src/components/Block/styles.module.css b/src/components/Block/styles.module.css
deleted file mode 100644
index fe052dcb..00000000
--- a/src/components/Block/styles.module.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.block {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    justify-content: flex-start;
-}
-
-.block.align {
-    align-items: center;
-}
-
-.horizontal {
-    flex-direction: row;
-}
-
-.vertical {
-    flex-direction: column;
-}
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 8c5dfd04..8a15b505 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -3,35 +3,35 @@ import s from "./footer.module.css"
 import cx from "classnames"
 import { Copyright } from "../Copyright"
 import { Author } from "./Author"
-import { Block } from "../Block"
 import { Spacer } from "../Spacer"
 import { Contacts } from "../Contacts"
+import { Box } from "@/ui/Box"
 
 export type FooterProps = {
     showAuthor: boolean
     children?: React.ReactNode
 }
 
-export const Footer: React.FC<FooterProps> = props => (
+export const Footer: React.FC<FooterProps> = ({ showAuthor, children }) => (
     <footer className={cx(s.footer, "opposite")}>
-        <Block direction={"vertical"} style={{
+        <Box vertical align={false} style={{
             marginBottom: "var(--size-l)",
         }}>
             <Contacts />
-        </Block>
+        </Box>
 
-        {props.children}
+        {children}
 
-        <Block direction={"horizontal"}>
+        <Box>
             <Copyright />
 
-            {!props.showAuthor ? null : (
+            {!showAuthor ? null : (
                 <>
                     <Spacer as={"span"} />
                     <Author />
                 </>
             )}
-        </Block>
+        </Box>
     </footer >
 )
 
diff --git a/src/components/PageGrid/index.tsx b/src/components/PageGrid/index.tsx
index 289d1d1a..7c518751 100644
--- a/src/components/PageGrid/index.tsx
+++ b/src/components/PageGrid/index.tsx
@@ -3,8 +3,8 @@ import { PageCardDto } from "@/types"
 import { CardGrid } from "../CardGrid"
 import { Card, CardLayout } from "../Card"
 import { Date } from "./Date"
-import { Block } from "../Block"
 import { Spacer } from "../Spacer"
+import { Box } from "@/ui/Box"
 
 export type PageGridProps = {
     items: PageCardDto[]
@@ -23,9 +23,7 @@ export const PageGrid: React.FC<PageGridProps> = props => {
 
                 const content = !item.featured
                     ? (
-                        <Block
-                            direction={"vertical"}
-                        >
+                        <Box vertical>
                             {item.title}
                             <Spacer />
                             {!item.date ? null : (
@@ -33,7 +31,7 @@ export const PageGrid: React.FC<PageGridProps> = props => {
                                     marginTop: "var(--size-m)",
                                 }}>{item.date}</Date>
                             )}
-                        </Block>
+                        </Box>
                     ) : (
                         item.title
                     )