From 0425a61cb4210b715e18e8431d13d19644b2da4c Mon Sep 17 00:00:00 2001 From: Tobias Keinert Date: Sat, 31 Dec 2022 14:58:44 +0100 Subject: [PATCH] add not-found-component --- src/App.css | 1 + src/App.js | 9 +-- src/components/Menu.js | 7 +++ src/components/NotFound.css | 8 +++ src/components/NotFound.js | 19 ++++++ src/images/NotFound.jsx | 70 ++++++++++++++++++++++ src/images/not_found.svg | 116 ------------------------------------ 7 files changed, 108 insertions(+), 122 deletions(-) create mode 100644 src/components/NotFound.css create mode 100644 src/components/NotFound.js create mode 100644 src/images/NotFound.jsx delete mode 100644 src/images/not_found.svg diff --git a/src/App.css b/src/App.css index 3a48fc8..5a9df6e 100644 --- a/src/App.css +++ b/src/App.css @@ -7,4 +7,5 @@ .App-body { flex-grow: 1; overflow: auto; + background: linear-gradient(to right, #330d38 0%, #190d36 100%); } \ No newline at end of file diff --git a/src/App.js b/src/App.js index 5f7fdd0..f8888c4 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,14 @@ -import Menu from './components/Menu.js'; +import Menu from './components/Menu'; import Foot from './components/Foot'; +import NotFound from './components/NotFound' import './App.css'; -//import {ReactComponent as NotFound} from './images/not_found.svg'; function App() { return (
- start -















1 -
















2 -
















end +
diff --git a/src/components/Menu.js b/src/components/Menu.js index 599abd4..18e9a09 100644 --- a/src/components/Menu.js +++ b/src/components/Menu.js @@ -1,3 +1,10 @@ +/** + * SVG minifyer: https://www.svgminify.com/ + * SVG to JSX converter: + * https://react-svgr.com/playground/ + * https://svg2jsx.com/ + */ + import {ReactComponent as DownloadIcon} from '../images/cloud-download.svg'; import {ReactComponent as CloudIcon} from '../images/cloud.svg'; import {ReactComponent as Arrow} from '../images/arrow.svg'; diff --git a/src/components/NotFound.css b/src/components/NotFound.css new file mode 100644 index 0000000..370b15e --- /dev/null +++ b/src/components/NotFound.css @@ -0,0 +1,8 @@ +.not-found { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} \ No newline at end of file diff --git a/src/components/NotFound.js b/src/components/NotFound.js new file mode 100644 index 0000000..0d29060 --- /dev/null +++ b/src/components/NotFound.js @@ -0,0 +1,19 @@ +/** + * SVG minifyer: https://www.svgminify.com/ + * SVG to JSX converter: + * https://react-svgr.com/playground/ + * https://svg2jsx.com/ + */ + +import NotFoundImg from '../images/NotFound.jsx'; +import './NotFound.css' + +function NotFound () { + return ( +
+ +
+ ); +} + +export default NotFound; \ No newline at end of file diff --git a/src/images/NotFound.jsx b/src/images/NotFound.jsx new file mode 100644 index 0000000..c0fa540 --- /dev/null +++ b/src/images/NotFound.jsx @@ -0,0 +1,70 @@ +import * as React from "react" + +const NotFound = (props) => ( + + + + + + + + + + + + + + + + + + + + +) + +export default NotFound \ No newline at end of file diff --git a/src/images/not_found.svg b/src/images/not_found.svg deleted file mode 100644 index 938ab59..0000000 --- a/src/images/not_found.svg +++ /dev/null @@ -1,116 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -