Create 404 page

package.json

@@ -21,7 +21,8 @@
     "koa-router": "^9.4.0",
     "next": "^9.5.3",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "react-particles-js": "^3.3.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.11.6",

src/components/BackgroundParticles/index.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import Particles, { IParticlesParams } from 'react-particles-js';
+import { withStyles } from '@material-ui/core/styles';
+
+const useStyles = withStyles((theme) => ({
+  root: {
+    '& > canvas': {
+      background: theme.palette.secondary.main,
+    },
+  },
+}));
+
+const styles = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  zIndex: 1,
+};
+
+const params: IParticlesParams = {
+  particles: {
+    number: {
+      value: 80,
+      density: {
+        enable: true,
+        value_area: 800,
+      },
+    },
+    color: {
+      value: '#9580FF',
+    },
+    shape: {
+      type: 'polygon',
+      stroke: {
+        width: 0,
+        color: '#000000',
+      },
+      polygon: {
+        nb_sides: 5,
+      },
+      image: {
+        src: 'img/github.svg',
+        width: 100,
+        height: 100,
+      },
+    },
+    opacity: {
+      value: 0.4,
+      random: false,
+      anim: {
+        enable: false,
+        speed: 1,
+        opacity_min: 0.1,
+        sync: false,
+      },
+    },
+    size: {
+      value: 3,
+      random: true,
+      anim: {
+        enable: false,
+        speed: 40,
+        size_min: 0.1,
+        sync: false,
+      },
+    },
+    line_linked: {
+      enable: true,
+      distance: 150,
+      color: '#9580FF',
+      opacity: 0.1,
+      width: 1,
+    },
+    move: {
+      enable: true,
+      speed: 6,
+      direction: 'none',
+      random: false,
+      straight: false,
+      out_mode: 'out',
+      bounce: false,
+      attract: {
+        enable: false,
+        rotateX: 600,
+        rotateY: 1200,
+      },
+    },
+  },
+};
+
+type Props = { classes: Record<string, string> };
+
+export const BackgroundParticles = ({ classes }: Props): React.ReactElement => {
+  return <Particles style={styles} params={params} className={classes.root} />;
+};
+
+export default useStyles(BackgroundParticles);

src/components/Header/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { fade, makeStyles } from '@material-ui/core/styles';
+import { fade, withStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
@@ -8,12 +8,13 @@ import SearchIcon from '@material-ui/icons/Search';
 
 import { CustomTheme } from '~/theme';
 
-const useStyles = makeStyles((theme: CustomTheme) => ({
+const useStyles = withStyles((theme: CustomTheme) => ({
   grow: {
     flexGrow: 1,
   },
   appBar: {
     background: theme.palette.appBarColor,
+    zIndex: 5,
   },
   menuButton: {
     marginRight: theme.spacing(2),
@@ -84,37 +85,35 @@ const useStyles = makeStyles((theme: CustomTheme) => ({
   },
 }));
 
-export const Header = (): React.ReactElement => {
-  const classes = useStyles();
+type Props = { classes: Record<string, string> };
 
-  return (
-    <div className={classes.grow}>
-      <AppBar position="static" className={classes.appBar}>
-        <Toolbar>
-          <div className={classes.title}>
-            <img src="/site/logo.png" />
-            <Typography variant="h6" noWrap>
-              pRest
-            </Typography>
+export const Header = ({ classes }: Props): React.ReactElement => (
+  <div className={classes.grow}>
+    <AppBar position="fixed" className={classes.appBar}>
+      <Toolbar>
+        <div className={classes.title}>
+          <img src="/site/logo.png" />
+          <Typography variant="h6" noWrap>
+            pRest
+          </Typography>
+        </div>
+        <div className={classes.search}>
+          <div className={classes.searchIcon}>
+            <SearchIcon />
           </div>
-          <div className={classes.search}>
-            <div className={classes.searchIcon}>
-              <SearchIcon />
-            </div>
-            <InputBase
-              placeholder="Search…"
-              classes={{
-                root: classes.inputRoot,
-                input: classes.inputInput,
-              }}
-              inputProps={{ 'aria-label': 'search' }}
-            />
-          </div>
-          <div className={classes.sectionDesktop} />
-        </Toolbar>
-      </AppBar>
-    </div>
-  );
-};
+          <InputBase
+            placeholder="Search…"
+            classes={{
+              root: classes.inputRoot,
+              input: classes.inputInput,
+            }}
+            inputProps={{ 'aria-label': 'search' }}
+          />
+        </div>
+        <div className={classes.sectionDesktop} />
+      </Toolbar>
+    </AppBar>
+  </div>
+);
 
-export default Header;
+export default useStyles(Header);

src/components/PageError/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import useStyles from './styles';
+
+type Props = {
+  code: string;
+  message: string;
+  description: string;
+  classes: any;
+};
+
+export const PageError = ({ classes, code, message, description }: Props): React.ReactElement => {
+  return (
+    <div className={classes.container}>
+      <h1 className={classes.h1}>
+        {code} <small>{message}</small>
+      </h1>
+      <h2 className={classes.h2}>{description}</h2>
+      <img src="/site/about_img3.png" className={classes.errorImage} />
+    </div>
+  );
+};
+
+export default useStyles(PageError);

src/components/PageError/styles.tsx

@@ -0,0 +1,39 @@
+import { withStyles } from '@material-ui/core/styles';
+
+const useStyles = withStyles((theme) => ({
+  container: {
+    height: '100vh',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+    zIndex: 2,
+  },
+  errorImage: {
+    maxWidth: '300px',
+  },
+  h1: {
+    padding: '0',
+    margin: '0',
+    fontSize: '120px',
+    textAlign: 'center',
+    fontWeight: 'bold',
+    color: theme.palette.primary.main,
+    lineHeight: '75px',
+    '& > small': {
+      textTransform: 'uppercase',
+      display: 'block',
+      fontSize: '20%',
+    },
+  },
+  h2: {
+    color: '#FFFFFF',
+    fontWeight: 'bold',
+    maxWidth: '300px',
+    textAlign: 'center',
+    margin: '0 0 40px',
+  },
+}));
+
+export default useStyles;

src/pages/404.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import PageError from '~/components/PageError';
+import BackgroundParticles from '~/components/BackgroundParticles';
+
+export const PageNotFound = (): React.ReactElement => (
+  <>
+    <PageError
+      code="404"
+      message="page not found"
+      description="We are sorry but the page are looking for does not exist."
+    />
+    <BackgroundParticles />
+  </>
+);
+
+export default PageNotFound;

src/pages/_app.tsx

@@ -37,6 +37,7 @@ const PRestApp = (props: AppProps): ReactElement => {
         <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
         <link rel="manifest" href="/manifest.json" />
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet" />
         <meta name="msapplication-TileColor" content="#ffffff" />
         <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
         <meta name="theme-color" content="#ffffff" />

tests/components/BackgroundParticles.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import BackgroundParticles from './../../src/components/BackgroundParticles';
+
+describe('components/BackgroundParticles', () => {
+  it('should render component properly', () => {
+    const wrap = shallow(<BackgroundParticles />);
+
+    expect(wrap).toBeCalled;
+  });
+});

tests/components/PageError.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import PageError from '../../src/components/PageError';
+
+describe('components/PageError', () => {
+  it('should render component properly', () => {
+    const wrap = shallow(<PageError code="foo" message="bar" description="test" />);
+
+    expect(wrap).toBeCalled;
+  });
+});

yarn.lock

@@ -7227,6 +7227,11 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+pathseg@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pathseg/-/pathseg-1.2.0.tgz#22af051e28037671e7799e296fe96c5dcbe53acd"
+  integrity sha512-+pQS7lTaoVIXhaCW7R3Wd/165APzZHWzYVqe7dxzdupxQwebgpBaCmf0/XZwmoA/rkDq3qvzO0qv4d5oFVrBRw==
+
 pbkdf2@^3.0.3:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.1.tgz#cb8724b0fada984596856d1a6ebafd3584654b94"
@@ -7620,6 +7625,14 @@ [email protected], react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-particles-js@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-particles-js/-/react-particles-js-3.3.0.tgz#ecedd5b5c6b853bbf29a7e03ea2af898b8048091"
+  integrity sha512-pc9oJWEHH3UR1sJurL98TPrEWr0Yf2E8j+f8PLDpgbnQirTRqfwEvTRNJ/Ibvt6233WycCrndn6ImfL0PDEr7A==
+  dependencies:
+    lodash "^4.17.11"
+    tsparticles "^1.17.1"
+
 [email protected]:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
@@ -8897,6 +8910,19 @@ tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
   integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
 
+tslib@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.1.tgz#410eb0d113e5b6356490eec749603725b021b43e"
+  integrity sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==
+
+tsparticles@^1.17.1:
+  version "1.17.10"
+  resolved "https://registry.yarnpkg.com/tsparticles/-/tsparticles-1.17.10.tgz#ba8392f09531d57f1261ecb528593e89883c6b9a"
+  integrity sha512-ZPadfL/zcXwTASwdQ6G/hAaabkzXBcV7FGtdeAa92GsoHgUexgpGwlMK9HI9yCQxDvigOaa2Y6A3jEDGXiNOXA==
+  dependencies:
+    pathseg "^1.2.0"
+    tslib "^2.0.0"
+
 [email protected]:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb"