feat: coming soon

components/ErrorPage/ErrorPage.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/react'
+
+import { ErrorPage as Component, ErrorPageProps } from './ErrorPage'
+
+const Stories: Meta = {
+  title: 'ErrorPage',
+  component: Component
+}
+
+export default Stories
+
+export const ErrorPage: Story<ErrorPageProps> = (arguments_) => {
+  return <Component {...arguments_} />
+}
+ErrorPage.args = { message: 'message content', statusCode: 404 }

components/ErrorPage/ErrorPage.test.tsx

@@ -0,0 +1,15 @@
+import { render } from '@testing-library/react'
+
+import { ErrorPage } from '../ErrorPage'
+
+describe('<ErrorPage />', () => {
+  it('should render the message and statusCode', async () => {
+    const messageContent = 'message content'
+    const statusCode = 404
+    const { getByText } = render(
+      <ErrorPage statusCode={statusCode} message={messageContent} />
+    )
+    expect(getByText(messageContent)).toBeInTheDocument()
+    expect(getByText(statusCode)).toBeInTheDocument()
+  })
+})

components/ErrorPage/ErrorPage.tsx

@@ -0,0 +1,53 @@
+import useTranslation from 'next-translate/useTranslation'
+import Link from 'next/link'
+
+export interface ErrorPageProps {
+  statusCode: number
+  message: string
+}
+
+export const ErrorPage: React.FC<ErrorPageProps> = (props) => {
+  const { message, statusCode } = props
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <h1 className='my-6 font-semibold text-4xl'>
+        {t('errors:error')}{' '}
+        <span
+          className='text-green-800 dark:text-green-400'
+          data-cy='status-code'
+        >
+          {statusCode}
+        </span>
+      </h1>
+      <p className='text-center text-lg'>
+        {message}{' '}
+        <Link href='/'>
+          <a className='text-green-800 dark:text-green-400 hover:underline'>
+            {t('errors:return-to-home-page')}
+          </a>
+        </Link>
+      </p>
+
+      <style jsx global>
+        {`
+          main {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            min-width: 100vw;
+            flex: 1;
+          }
+          #__next {
+            display: flex;
+            flex-direction: column;
+            padding-top: 0;
+            height: 100vh;
+          }
+        `}
+      </style>
+    </>
+  )
+}

components/ErrorPage/index.ts

@@ -0,0 +1 @@
+export * from './ErrorPage'