Merge pull request #1 from anastasiiavorobiova/feat/utility-pages

Feat/utility pages

public/messages/en.json

@@ -88,11 +88,14 @@
     "method": "Method",
     "url": "URL"
   },
-  "Error": {
-    "404": {
-      "title": "Looks like you're lost.",
-      "heading": "This page not found. Perhaps you were looking for something else?",
-      "back": "Back"
-    }
+  "NotFound": {
+    "title": "Looks like you're lost.",
+    "text": "This page not found. Perhaps you were looking for something else?",
+    "back": "Back"
+  },
+  "ErrorPage": {
+    "title": "Something bad just happened...",
+    "text": "Our servers could not handle your request. Don't worry, try refreshing the page.",
+    "button": "Refresh the page"
   }
 }

public/messages/ua.json

@@ -88,11 +88,14 @@
     "method": "Метод",
     "url": "Посилання"
   },
-  "Error": {
-    "404": {
-      "title": "Схоже, Ви заблукали.",
-      "heading": "Веб сторінку не знайдено. Можливо, ви шукали щось інше?",
-      "back": "Повернутись"
-    }
+  "NotFound": {
+    "title": "Схоже, Ви заблукали.",
+    "text": "Веб сторінку не знайдено. Можливо, ви шукали щось інше?",
+    "back": "Повернутись"
+  },
+  "ErrorPage": {
+    "title": "Щось пішло не так...",
+    "text": "Наш сервер не зміг обробити запит. Не хвилюйтесь, спробуйте перезавантажити сторінку.",
+    "button": "Перезавантажити сторінку"
   }
 }

src/app/[locale]/error.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import ErrorPage from '@/widgets/ErrorPage';
+
+export default function ErrorBoundary({ reset }: { reset: () => void }) {
+  return <ErrorPage reset={reset} />;
+}

src/app/[locale]/globals.css

@@ -34,7 +34,6 @@ main {
 }
 
 header,
-footer,
 main {
   padding: 20px;
 }

src/app/[locale]/loading.tsx

@@ -0,0 +1,9 @@
+import { Center, Loader } from '@/shared/ui';
+
+export default function Loading() {
+  return (
+    <Center h={100} w="100%">
+      <Loader color="teal" mx="auto" />
+    </Center>
+  );
+}

src/app/[locale]/not-found.tsx

@@ -4,7 +4,7 @@ import { Container, Title, Text, Button, Group, NotFoundIcon } from '@/shared/ui
 import styles from './NotFound.module.css';
 
 export default function NotFoundPage({ reset }: { reset: () => void }) {
-  const t = useTranslations('Error.404');
+  const t = useTranslations('NotFound');
 
   return (
     <Container className={styles.root}>
@@ -15,7 +15,7 @@ export default function NotFoundPage({ reset }: { reset: () => void }) {
             {t('title')}
           </Title>
           <Text c="dimmed" size="lg" ta="center" className={styles.description} data-testid="NotFoundTitle">
-            {t('heading')}
+            {t('text')}
           </Text>
           <Link href="/">
             <Group justify="center">

src/widgets/ErrorPage/index.ts

@@ -0,0 +1,3 @@
+import { ErrorPage } from './ui/ErrorPage';
+
+export default ErrorPage;

src/widgets/ErrorPage/ui/ErrorPage.module.css

@@ -0,0 +1,37 @@
+.root {
+  padding-top: rem(80px);
+  padding-bottom: rem(80px);
+}
+
+.label {
+  text-align: center;
+  font-weight: 900;
+  font-size: rem(38px);
+  line-height: 1;
+  margin-bottom: calc(1.5 * var(--mantine-spacing-xl));
+  color: var(--mantine-color-gray-2);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: rem(32px);
+  }
+}
+
+.description {
+  max-width: rem(500px);
+  margin: auto;
+  margin-top: var(--mantine-spacing-xl);
+  margin-bottom: calc(1.5 * var(--mantine-spacing-xl));
+}
+
+.title {
+  font-family:
+    Greycliff CF,
+    var(--mantine-font-family);
+  text-align: center;
+  font-weight: 900;
+  font-size: rem(38px);
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: rem(32px);
+  }
+}

src/widgets/ErrorPage/ui/ErrorPage.test.tsx

@@ -0,0 +1,12 @@
+import { describe, expect, test, vi } from 'vitest';
+import { screen } from '@testing-library/react';
+import { renderWithWrappers } from '@/shared/lib/tests/withWrappers';
+import { ErrorPage } from './ErrorPage';
+
+describe('Error Page component', () => {
+  test('Renders', async () => {
+    await renderWithWrappers(<ErrorPage reset={vi.fn()} />);
+
+    expect(screen.getByText('Something bad just happened...')).toBeInTheDocument();
+  });
+});

src/widgets/ErrorPage/ui/ErrorPage.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { Button, Container, Group, Title, Text } from '@/shared/ui';
+import { useTranslations } from 'next-intl';
+import styles from './ErrorPage.module.css';
+
+export function ErrorPage({ reset }: { reset: () => void }) {
+  const t = useTranslations('ErrorPage');
+
+  return (
+    <Container className={styles.root}>
+      <div className={styles.label}>500</div>
+      <Title className={styles.title}>{t('title')}</Title>
+      <Text c="dimmed" size="lg" ta="center" className={styles.description}>
+        {t('text')}
+      </Text>
+      <Group justify="center">
+        <Button variant="subtle" size="md" onClick={reset}>
+          {t('button')}
+        </Button>
+      </Group>
+    </Container>
+  );
+}