body wrapper refactoring

pages/_error.tsx

@@ -1,25 +1,28 @@
 import 'src/style/style.scss'
+
 import { NextPage } from 'next'
+import { Wrapper } from 'src/components/Wrapper'
 
 const Page: NextPage = () => (
-    <div className="body-wrapper">
-        <main className="body-wrapper__content">
-            <section className="error-404">
-                <div>
-                    <h1>Страница не найдена.</h1>
-                    <img src="/static/graphics/skull.jpg" />
+    <Wrapper
+        header={null}
+        footer={(
+            <footer className="footer--centered">
+                <div className="copyright">
+                    <span>©&nbsp;2012—2019 Шлиссельбургская детская художественная школа</span>
                 </div>
-
-                <div><a href="/">На главную</a></div>
-            </section>
-        </main>
-
-        <footer className="footer--centered">
-            <div className="copyright">
-                <span>©&nbsp;2012—2019 Шлиссельбургская детская художественная школа</span>
+            </footer>
+        )}
+    >
+        <section className="error-404">
+            <div>
+                <h1>Страница не найдена.</h1>
+                <img src="/static/graphics/skull.jpg" />
             </div>
-        </footer>
-    </div>
+
+            <div><a href="/">На главную</a></div>
+        </section>
+    </Wrapper>
 )
 
 export default Page

src/components/App/index.tsx

@@ -1,17 +1,16 @@
-import * as React from 'react'
+import 'src/style/style.scss'
+
 import dynamic from 'next/dynamic'
 import cx from 'classnames'
-
 import { Footer } from '../Footer'
 import Comments from '../Comments'
-import { useReducedMotion } from '../../hooks/useReducedMotion'
+import { useReducedMotion } from 'src/hooks/useReducedMotion'
+import { Wrapper } from '../Wrapper'
 
 const Header = dynamic(() => import('./Header'), {
     ssr: false,
 })
 
-import '../../style/style.scss'
-
 export interface IAppProps {
     menu: any
     showAuthor: boolean
@@ -23,34 +22,35 @@ export const App: React.FC<IAppProps> = props => {
     const motionDisabled = useReducedMotion()
 
     return (
-        <div className="body-wrapper theme-default">
-            <header>
-                <div className="navigation">
-                    <div className="navigation__body">
-                        <Header
-                            menuItems={props.menu.items}
-                        />
+        <Wrapper
+            header={(
+                <header>
+                    <div className="navigation">
+                        <div className="navigation__body">
+                            <Header
+                                menuItems={props.menu.items}
+                            />
+                        </div>
                     </div>
-                </div>
-            </header>
+                </header>
+            )}
+            footer={(
+                <Footer
+                    showAuthor={props.showAuthor}
+                    address=" г. Шлиссельбург ул. 18 января д. 3"
+                    telephone="+7 (81362) 76-312"
+                    email="hudozka@gmail.com"
+                />
+            )}
+        >
+            <section className={cx('content', `content_${props.layout}`, {
+                'content--padding-top--menu': props.menuPadding,
+                'reduced-motion': motionDisabled,
+            })}>
+                {props.children}
+            </section>
 
-            <main className="body-wrapper__content">
-                <section className={cx('content', `content_${props.layout}`, {
-                    'content--padding-top--menu': props.menuPadding,
-                    'reduced-motion': motionDisabled,
-                })}>
-                    {props.children}
-                </section>
-
-                <Comments />
-            </main>
-
-            <Footer
-                showAuthor={props.showAuthor}
-                address=" г. Шлиссельбург ул. 18 января д. 3"
-                telephone="+7 (81362) 76-312"
-                email="hudozka@gmail.com"
-            />
-        </div>
+            <Comments />
+        </Wrapper>
     )
 }

src/components/Wrapper/index.tsx

@@ -0,0 +1,34 @@
+import cx from 'classnames'
+
+export type WrapperProps = {
+    header: React.ReactNode
+    footer: React.ReactNode
+}
+
+export const Wrapper: React.FC<WrapperProps> = props => (
+    <div className={cx('wrapper', 'theme-default')}>
+        <style jsx>{`
+            .wrapper {
+                display: flex;
+                flex-direction: column;
+                min-height: 100vh;
+                background-color: white;
+
+                font-family: var(--text-font);
+                font-size: var(--font-size-default);
+            }
+
+            .content {
+                flex: 1;
+            }
+        `}</style>
+
+        {props.header}
+
+        <main className={'content'}>
+            {props.children}
+        </main>
+
+        {props.footer}
+    </div>
+)

src/style/body-wrapper.scss

@@ -1,13 +0,0 @@
-.body-wrapper {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  background-color: white;
-
-  font-family: var(--text-font);
-  font-size: var(--font-size-default);
-}
-
-.body-wrapper__content {
-  flex: 1;
-}

src/style/style.scss

@@ -17,7 +17,6 @@
 
 @import "components/ArticleTags";
 
-@import "body-wrapper";
 @import "content";
 @import "page-animation";
 @import "main-image";