From a7deb4d32ea310bb2abd1b03068269053f8fa83b Mon Sep 17 00:00:00 2001 From: Alireza Dorrani Date: Fri, 27 Dec 2024 03:03:47 +0330 Subject: [PATCH 1/5] [ADD] typography --- src/app/globals.css | 2 ++ src/app/layout.tsx | 1 + src/app/page.module.css | 2 +- src/components/footer/footer.module.css | 4 ++-- .../global-search-box/global-search-box.module.css | 2 +- src/styles/typography.css | 11 +++++++++++ 6 files changed, 18 insertions(+), 4 deletions(-) create mode 100644 src/styles/typography.css diff --git a/src/app/globals.css b/src/app/globals.css index fdca90f..a58948f 100644 --- a/src/app/globals.css +++ b/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); } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index c9c45b6..fb00c97 100644 --- a/src/app/layout.tsx +++ b/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({ diff --git a/src/app/page.module.css b/src/app/page.module.css index e837406..8dd4f0a 100644 --- a/src/app/page.module.css +++ b/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; diff --git a/src/components/footer/footer.module.css b/src/components/footer/footer.module.css index dd67f40..addd0f2 100644 --- a/src/components/footer/footer.module.css +++ b/src/components/footer/footer.module.css @@ -14,7 +14,7 @@ .logo { margin-block-end: 0.25rem; - font-size: 2rem; + font-size: var(--fz-600); font-weight: 700; } } @@ -37,7 +37,7 @@ > li { a { - font-size: 1.5rem; + font-size: var(--fz-500); } } } diff --git a/src/components/global-search-box/global-search-box.module.css b/src/components/global-search-box/global-search-box.module.css index ca1269f..7122154 100644 --- a/src/components/global-search-box/global-search-box.module.css +++ b/src/components/global-search-box/global-search-box.module.css @@ -14,7 +14,7 @@ display: grid; align-items: center; - font-size: 1.5rem; + font-size: var(--fz-500); } input { diff --git a/src/styles/typography.css b/src/styles/typography.css new file mode 100644 index 0000000..0ca2f2a --- /dev/null +++ b/src/styles/typography.css @@ -0,0 +1,11 @@ +:root { + --fz-100: ; + --fz-200: ; + --fz-300: clamp(0.75rem, 0.6429rem + 0.4762vw, 1rem); + --fz-400: clamp(1rem, 1rem + 0vw, 1rem); + --fz-500: clamp(1.25rem, 1.1429rem + 0.4762vw, 1.5rem); + --fz-600: clamp(1.5rem, 1.2857rem + 0.9524vw, 2rem); + --fz-700: clamp(1.75rem, 1.4286rem + 1.4286vw, 2.5rem); + --fz-800: clamp(2.5rem, 1.8571rem + 2.8571vw, 4rem); + --fz-900: clamp(3rem, 1.7143rem + 5.7143vw, 6rem); +} From 3bce7eecf4af217859067e697ecfea591c469797 Mon Sep 17 00:00:00 2001 From: Alireza Dorrani Date: Fri, 27 Dec 2024 13:46:00 +0330 Subject: [PATCH 2/5] [ADD] not found page --- src/app/not-found.module.css | 44 ++++++++++++++++++++++++++ src/app/not-found.tsx | 30 ++++++++++++++++++ src/assets/illustrations/error.svg | 1 + src/assets/illustrations/not-found.svg | 1 + 4 files changed, 76 insertions(+) create mode 100644 src/app/not-found.module.css create mode 100644 src/app/not-found.tsx create mode 100644 src/assets/illustrations/error.svg create mode 100644 src/assets/illustrations/not-found.svg diff --git a/src/app/not-found.module.css b/src/app/not-found.module.css new file mode 100644 index 0000000..542608e --- /dev/null +++ b/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; + } +} diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx new file mode 100644 index 0000000..a8462ff --- /dev/null +++ b/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 ( +
+
+
404
+

صفحه‌ی مورد نظر پیدا نشد!

+

+ با عرض پوزش، لطفاً از طریق کادر جستجو، پزشک یا مرکز درمانی مورد نظر + خود را جستجو کنید. +

+
+
+ +
+
+ +
+
+ ); +} \ No newline at end of file diff --git a/src/assets/illustrations/error.svg b/src/assets/illustrations/error.svg new file mode 100644 index 0000000..ee83b77 --- /dev/null +++ b/src/assets/illustrations/error.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/illustrations/not-found.svg b/src/assets/illustrations/not-found.svg new file mode 100644 index 0000000..9fc829e --- /dev/null +++ b/src/assets/illustrations/not-found.svg @@ -0,0 +1 @@ +? From 3e2ee268991b399c882bd279e3b7112d9c4082ba Mon Sep 17 00:00:00 2001 From: Alireza Dorrani Date: Fri, 27 Dec 2024 13:58:51 +0330 Subject: [PATCH 3/5] [Add] error handeling --- src/app/error.module.css | 70 ++++++++++++++++++++++++++++++++++++++++ src/app/error.tsx | 38 ++++++++++++++++++++++ 2 files changed, 108 insertions(+) create mode 100644 src/app/error.module.css create mode 100644 src/app/error.tsx diff --git a/src/app/error.module.css b/src/app/error.module.css new file mode 100644 index 0000000..244f7da --- /dev/null +++ b/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; + } + } + } +} diff --git a/src/app/error.tsx b/src/app/error.tsx new file mode 100644 index 0000000..6d7e290 --- /dev/null +++ b/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 ( +
+
+
بدبخت شدیم!
+

یک خطای غیرمنتظره رخ داده است.

+

با عرض پوزش، لطفاً با تیم پشتیبانی تماس بگیرید.

+
+
+ +
+
+ +
+
+
+ لاگ خطا + 
{error.stack}
+
+
+
+ ); +} \ No newline at end of file From 23a2d18883f56ccf4fd021d96613b44a2ddeaa92 Mon Sep 17 00:00:00 2001 From: Alireza Dorrani Date: Sun, 29 Dec 2024 19:35:39 +0330 Subject: [PATCH 4/5] [UPDATE] README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 0e84e9f..d418f2b 100644 --- a/README.md +++ b/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 From f3d884536e29578c39991fd0f0902c92233861a4 Mon Sep 17 00:00:00 2001 From: Alireza Dorrani Date: Sun, 29 Dec 2024 19:44:33 +0330 Subject: [PATCH 5/5] [PRETTIER] fix format --- src/app/error.tsx | 48 +++++++++++++++++++++---------------------- src/app/not-found.tsx | 38 +++++++++++++++++----------------- 2 files changed, 43 insertions(+), 43 deletions(-) diff --git a/src/app/error.tsx b/src/app/error.tsx index 6d7e290..eed68e0 100644 --- a/src/app/error.tsx +++ b/src/app/error.tsx @@ -9,30 +9,30 @@ import errorImage from "@/assets/illustrations/error.svg"; import styles from "./error.module.css"; type Props = { - error: Error & { digest?: string }; - reset: () => void; + error: Error & { digest?: string }; + reset: () => void; }; export default function Error({ error, reset }: Props): ReactElement { - return ( -
-
-
بدبخت شدیم!
-

یک خطای غیرمنتظره رخ داده است.

-

با عرض پوزش، لطفاً با تیم پشتیبانی تماس بگیرید.

-
-
- -
-
- -
-
-
- لاگ خطا - 
{error.stack}
-
-
-
- ); -} \ No newline at end of file + return ( +
+
+
بدبخت شدیم!
+

یک خطای غیرمنتظره رخ داده است.

+

با عرض پوزش، لطفاً با تیم پشتیبانی تماس بگیرید.

+
+
+ +
+
+ +
+
+
+ لاگ خطا + 
{error.stack}
+
+
+
+ ); +} diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx index a8462ff..19a1f34 100644 --- a/src/app/not-found.tsx +++ b/src/app/not-found.tsx @@ -9,22 +9,22 @@ import GlobalSearchBoxComponent from "@/components/global-search-box/global-sear import styles from "./not-found.module.css"; export default function NotFound(): ReactElement { - return ( -
-
-
404
-

صفحه‌ی مورد نظر پیدا نشد!

-

- با عرض پوزش، لطفاً از طریق کادر جستجو، پزشک یا مرکز درمانی مورد نظر - خود را جستجو کنید. -

-
-
- -
-
- -
-
- ); -} \ No newline at end of file + return ( +
+
+
404
+

صفحه‌ی مورد نظر پیدا نشد!

+

+ با عرض پوزش، لطفاً از طریق کادر جستجو، پزشک یا مرکز درمانی مورد نظر + خود را جستجو کنید. +

+
+
+ +
+
+ +
+
+ ); +}