feat: add error page

src/app/[locale]/error.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { Header } from '@/components/Header';
+import { Box, Button, Container, Stack, Typography } from '@mui/material';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import { FC, useEffect } from 'react';
+
+export interface ErrorProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+const Error: FC<ErrorProps> = ({ error, reset }) => {
+  const t = useTranslations();
+
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <>
+      <Header />
+
+      <Container
+        maxWidth="xs"
+        sx={{
+          px: 2,
+          mt: 6,
+        }}
+      >
+        <Stack
+          spacing={2}
+          alignItems="center"
+          sx={{
+            userSelect: 'none',
+          }}
+        >
+          <Image
+            width={200}
+            height={200}
+            src="/assets/images/unplugged.png"
+            alt="Error!"
+            style={{
+              opacity: 0.68,
+            }}
+          />
+          <Typography variant="h5" component="h1">
+            {t('pages.error.message')}
+          </Typography>
+          <Button fullWidth variant="contained" size="large" onClick={reset}>
+            {t('pages.error.buttons.reset')}
+          </Button>
+        </Stack>
+      </Container>
+    </>
+  );
+};
+
+export default Error;

src/components/Header/Header.tsx

@@ -4,13 +4,13 @@ import { AppBar, Container } from '@mui/material';
 import { FC, Suspense } from 'react';
 import DesktopView from '../App/DesktopView';
 import MobileView from '../App/MobileView';
-import { DesktopHeader } from './components';
+import { DesktopHeader, MobileHeader } from './components';
 import TopBanner, {
   TopBannerProps,
 } from '@/app/[locale]/(main)/components/TopBanner/TopBanner';
 
 export interface HeaderProps {
-  topBanner: TopBannerProps['data'];
+  topBanner?: TopBannerProps['data'];
 }
 const Header: FC<HeaderProps> = ({ topBanner }) => {
   return (
@@ -26,14 +26,14 @@ const Header: FC<HeaderProps> = ({ topBanner }) => {
         backgroundColor: '#ffffff',
       }}
     >
-      <TopBanner data={topBanner} />
+      {topBanner && <TopBanner data={topBanner} />}
       <Container maxWidth="xl">
         <DesktopView>
           <DesktopHeader />
         </DesktopView>
         <MobileView>
           <Suspense>
-            <MobileView />
+            <MobileHeader />
           </Suspense>
         </MobileView>
       </Container>

src/data/i18n/en.json

@@ -97,9 +97,15 @@
       },
       "sendAgainText": "to send again",
       "seconds": "s"
+    },
+    "error": {
+      "message": "Oops, Something went wrong!",
+      "buttons": {
+        "reset": "ُTry again!"
+      }
     }
   },
   "fields": {
     "size": "Size"
   }
-}
+}

src/data/i18n/fa.json

@@ -97,9 +97,15 @@
       },
       "sendAgainText": "تا ارسال مجدد",
       "seconds": "ثانیه"
+    },
+    "error": {
+      "message": "متاسفانه خطایی رخ داده است.",
+      "buttons": {
+        "reset": "تلاش دوباره!"
+      }
     }
   },
   "fields": {
     "size": "سایز"
   }
-}
+}