From f8373765fd50e4432e4c47b99d7746b789745d6a Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Tue, 18 Feb 2020 11:46:33 +0300
Subject: [PATCH] extract NotFound component with isolated style

---
 pages/_error.tsx                  | 10 ++--------
 src/components/NotFound/index.tsx | 33 +++++++++++++++++++++++++++++++
 src/style/error-404.scss          | 20 -------------------
 src/style/style.scss              |  1 -
 4 files changed, 35 insertions(+), 29 deletions(-)
 create mode 100644 src/components/NotFound/index.tsx
 delete mode 100644 src/style/error-404.scss

diff --git a/pages/_error.tsx b/pages/_error.tsx
index f2aef519..8702f671 100644
--- a/pages/_error.tsx
+++ b/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>
 )
 
diff --git a/src/components/NotFound/index.tsx b/src/components/NotFound/index.tsx
new file mode 100644
index 00000000..bddfa175
--- /dev/null
+++ b/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>
+)
diff --git a/src/style/error-404.scss b/src/style/error-404.scss
deleted file mode 100644
index 3d30fdce..00000000
--- a/src/style/error-404.scss
+++ /dev/null
@@ -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;
-  }
-}
\ No newline at end of file
diff --git a/src/style/style.scss b/src/style/style.scss
index 7c24d109..0d734ccd 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -24,7 +24,6 @@
 
 @import "schedule-selector";
 @import "schedule-mobile";
-@import "error-404";
 
 @import "tape-viewer";
 @import "footer";