use Box instead of Block

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

src/components/Block/index.tsx

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

src/components/Block/styles.module.css

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

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

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
                     )