extract NotFound component with isolated style

pages/_error.tsx

@@ -2,6 +2,7 @@ import 'src/style/style.scss'
 
 import { NextPage } from 'next'
 import { Wrapper } from 'src/components/Wrapper'
+import { NotFound } from 'src/components/NotFound'
 
 const Page: NextPage = () => (
     <Wrapper
@@ -14,14 +15,7 @@ const Page: NextPage = () => (
             </footer>
         )}
     >
-        <section className="error-404">
-            <div>
-                <h1>Страница не найдена.</h1>
-                <img src="/static/graphics/skull.jpg" />
-            </div>
-
-            <div><a href="/">На главную</a></div>
-        </section>
+        <NotFound />
     </Wrapper>
 )
 

src/components/NotFound/index.tsx

@@ -0,0 +1,33 @@
+export const NotFound: React.FC = () => (
+    <section> 
+        <style jsx>{`
+            section {
+                margin: 1em 0;
+
+                text-align: center;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+            }
+
+            h1 {
+                font-size: 16pt;
+                font-weight: normal;
+            }
+
+            img {
+                margin: 20px;
+                width: 40%;
+                max-width: 400px;
+            }
+        `}</style>
+        
+        <div>
+            <h1>Страница не найдена.</h1>
+            <img src="/static/graphics/skull.jpg" />
+        </div>
+
+        <div><a href="/">На главную</a></div>
+    </section>
+)

src/style/error-404.scss

@@ -1,20 +0,0 @@
-.error-404{
-  margin: 1em 0;
-
-  text-align: center;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-  h1{
-    font-size: 16pt;
-    font-weight: normal;
-  }
-
-  img{
-    margin: 20px;
-    width: 40%;
-    max-width: 400px;
-  }
-}

src/style/style.scss

@@ -24,7 +24,6 @@
 
 @import "schedule-selector";
 @import "schedule-mobile";
-@import "error-404";
 
 @import "tape-viewer";
 @import "footer";