Lesson 3

README.md

@@ -1,5 +1,7 @@
 # Doctor Man
 
+Visit [Demo](https://doctorman.vercel.app/) page.
+
 This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
 ## Getting Started

src/app/error.module.css

@@ -0,0 +1,70 @@
+.error {
+  display: grid;
+  grid-template-areas: "writings visuals" "actions actions" "trace trace";
+  grid-template-columns: repeat(2, minmax(0, auto));
+  place-content: center;
+  column-gap: 4rem;
+  row-gap: 1rem;
+
+  min-block-size: 100%;
+
+  .writings {
+    grid-area: writings;
+
+    .status-code {
+      font-size: var(--fz-800);
+      font-weight: 700;
+    }
+
+    h1 {
+      margin-block-end: 1rem;
+
+      font-size: var(--fz-600);
+    }
+  }
+
+  .visuals {
+    grid-area: visuals;
+  }
+
+  .actions {
+    grid-area: actions;
+    grid-column: 1 / -1;
+
+    button {
+      background-color: var(--color-primary);
+      color: var(--color-primary-opposite);
+
+      padding: 0.5rem 2rem;
+
+      border: none;
+      border-radius: var(--border-radius);
+
+      font-size: 1rem;
+      font-weight: 900;
+
+      cursor: pointer;
+    }
+  }
+
+  .trace {
+    grid-area: trace;
+
+    min-inline-size: 100%;
+    inline-size: 0;
+
+    margin-block-start: 2rem;
+
+    details {
+      summary {
+        cursor: pointer;
+      }
+
+      pre {
+        overflow: auto;
+
+        max-block-size: 12rem;
+      }
+    }
+  }
+}

src/app/error.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { ReactElement } from "react";
+
+import Image from "next/image";
+
+import errorImage from "@/assets/illustrations/error.svg";
+
+import styles from "./error.module.css";
+
+type Props = {
+  error: Error & { digest?: string };
+  reset: () => void;
+};
+
+export default function Error({ error, reset }: Props): ReactElement {
+  return (
+    <div className={styles["error"]}>
+      <div className={styles.writings}>
+        <div className={styles["status-code"]}>بدبخت شدیم!</div>
+        <h1>یک خطای غیرمنتظره رخ داده است.</h1>
+        <p>با عرض پوزش، لطفاً با تیم پشتیبانی تماس بگیرید.</p>
+      </div>
+      <div className={styles.visuals}>
+        <Image src={errorImage} alt="" />
+      </div>
+      <div className={styles.actions}>
+        <button onClick={reset}>تلاش مجدد</button>
+      </div>
+      <div className={styles.trace}>
+        <details>
+          <summary>لاگ خطا</summary>
+          <pre dir="ltr">{error.stack}</pre>
+        </details>
+      </div>
+    </div>
+  );
+}

src/app/globals.css

@@ -79,6 +79,8 @@ body {
   min-block-size: 100vh;
   min-block-size: 100dvh;
 
+  font-size: var(--fz-400);
+
   > * {
     padding-inline: var(--full-width-padding-inline);
   }

src/app/layout.tsx

@@ -6,6 +6,7 @@ import { Vazirmatn } from "next/font/google";
 import FooterComponent from "@/components/footer/footer.component";
 import HeaderComponent from "@/components/header/header.component";
 
+import "@/styles/typography.css";
 import "./globals.css";
 
 const vazirmatn = Vazirmatn({

src/app/not-found.module.css

@@ -0,0 +1,44 @@
+.not-found {
+  display: grid;
+  grid-template-areas: "writings visuals" "search visuals";
+  place-content: center;
+  gap: 1rem;
+
+  min-block-size: 100%;
+
+  .writings {
+    grid-area: writings;
+
+    .status-code {
+      font-size: var(--fz-800);
+      font-weight: 300;
+
+      line-height: 0.8;
+    }
+
+    h1 {
+      margin-block-end: 1rem;
+
+      font-size: var(--fz-600);
+    }
+
+    p {
+      max-inline-size: 50ch;
+    }
+  }
+
+  .visuals {
+    grid-area: visuals;
+
+    min-block-size: 100%;
+    block-size: 0;
+
+    img {
+      block-size: 100%;
+    }
+  }
+
+  .search {
+    grid-area: search;
+  }
+}

src/app/not-found.tsx

@@ -0,0 +1,30 @@
+import { ReactElement } from "react";
+
+import Image from "next/image";
+
+import notFoundImage from "@/assets/illustrations/not-found.svg";
+
+import GlobalSearchBoxComponent from "@/components/global-search-box/global-search-box.component";
+
+import styles from "./not-found.module.css";
+
+export default function NotFound(): ReactElement {
+  return (
+    <div className={styles["not-found"]}>
+      <div className={styles.writings}>
+        <div className={styles["status-code"]}>404</div>
+        <h1>صفحه‌ی مورد نظر پیدا نشد!</h1>
+        <p>
+          با عرض پوزش، لطفاً از طریق کادر جستجو، پزشک یا مرکز درمانی مورد نظر
+          خود را جستجو کنید.
+        </p>
+      </div>
+      <div className={styles.visuals}>
+        <Image src={notFoundImage} alt="" />
+      </div>
+      <div className={styles.search}>
+        <GlobalSearchBoxComponent />
+      </div>
+    </div>
+  );
+}

src/app/page.module.css

@@ -13,7 +13,7 @@
     align-items: center;
     gap: 1rem;
 
-    font-size: 2.5rem;
+    font-size: var(--fz-700);
 
     svg {
       font-size: 1.5em;