Lesson 5

next.config.mjs

@@ -1,4 +1,17 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "cdn.paziresh24.com",
+      },
+    ],
+  },
+
+  //   images: {
+  //     domains: ['assets.acme.com'],
+  //   },
+};
 
 export default nextConfig;

src/app/doctor/[[...slug]]/components/about/about.component.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+
+import CardComponent from "@/components/card/card.component";
+
+import styles from "./about.module.css";
+
+type Props = {
+  aboutText: string;
+};
+
+const AboutComponent: React.FC<Props> = ({ aboutText }): ReactNode => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>
+        <h2>درباره دکتر</h2>
+      </div>
+      <CardComponent>
+        <div
+          dangerouslySetInnerHTML={{ __html: aboutText ?? "" }}
+          className={styles.about}
+        />
+      </CardComponent>
+    </div>
+  );
+};
+
+export default AboutComponent;

src/app/doctor/[[...slug]]/components/about/about.module.css

@@ -0,0 +1,26 @@
+.container {
+  display: grid;
+  gap: 1rem;
+
+  .title {
+    h2 {
+      font-size: var(--fz-300);
+    }
+  }
+
+  .about div {
+    font-size: var(--fz-200);
+
+    h2 {
+      font-size: var(--fz-300);
+    }
+
+    > *:not(:first-child) {
+      margin-block-start: 1rem;
+    }
+
+    ol {
+      margin-inline-start: 1.8rem;
+    }
+  }
+}

src/app/doctor/[[...slug]]/components/activities/activities.component.tsx

@@ -0,0 +1,52 @@
+import { ReactElement } from "react";
+
+import CardComponent from "@/components/card/card.component";
+
+import MingcuteCommentLine from "@/icons/MingcuteCommentLine";
+import MingcuteAwardLine from "@/icons/MingcuteAwardLine";
+
+import styles from "./activities.module.css";
+
+type Props = {
+  doctorName: string;
+  activeCounsulate: number;
+};
+
+const ActivitiesComponent: React.FC<Props> = ({
+  doctorName,
+  activeCounsulate,
+}): ReactElement => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>
+        <h2>فعالیت‌ها</h2>
+      </div>
+      <CardComponent>
+        <div className={styles.activity}>
+          <ul>
+            <li>
+              <MingcuteCommentLine />
+              <span>
+                <span className={styles.consulation_count}>
+                  {activeCounsulate.toLocaleString()}
+                </span>
+                &nbsp;
+                <span>مشاوره فعال</span>
+              </span>
+            </li>
+
+            <li>
+              <MingcuteAwardLine />
+              <span>
+                پذیرش24 بیش از 2 سال و 11 ماه افتخار میزبانی از صفحه اختصاصی
+                دکتر {doctorName} را داشته است.
+              </span>
+            </li>
+          </ul>
+        </div>
+      </CardComponent>
+    </div>
+  );
+};
+
+export default ActivitiesComponent;

src/app/doctor/[[...slug]]/components/activities/activities.module.css

@@ -0,0 +1,39 @@
+.container {
+  display: grid;
+  gap: 1rem;
+
+  .title {
+    h2 {
+      font-size: var(--fz-300);
+    }
+  }
+
+  .activity {
+    ul li {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      background-color: var(--color-surface-400);
+
+      font-size: var(--fz-200);
+
+      border-radius: var(--border-radius);
+
+      padding-inline: 1rem;
+      padding-block: 0.8rem;
+
+      svg {
+        inline-size: 1.4rem;
+        block-size: 1.4rem;
+      }
+      .consulation_count {
+        font-weight: 600;
+      }
+    }
+
+    ul li:not(:first-child) {
+      margin-block-start: 0.8rem;
+    }
+  }
+}

src/app/doctor/[[...slug]]/components/contact/contact.component.tsx

@@ -0,0 +1,81 @@
+import { ReactNode } from "react";
+
+import CardComponent from "@/components/card/card.component";
+
+import MingcutePencilLine from "@/icons/MingcutePencilLine";
+import MingcuteCalendar2Line from "@/icons/MingcuteCalendar2Line";
+import MingcutePhoneLine from "@/icons/MingcutePhoneLine";
+import MingcuteLocationLine from "@/icons/MingcuteLocationLine";
+
+import styles from "./contact.module.css";
+
+type Props = {
+  address: string;
+  doctorName: string;
+};
+
+const extractCityAndAddress = (fullAddress: string) => {
+  const parts = fullAddress.split(/[,.،]/);
+  const city = parts[0]?.trim() || "";
+  const remainingAddress = parts.slice(1).join(", ").trim();
+  return { city, remainingAddress };
+};
+
+const ContactComponent: React.FC<Props> = ({
+  address,
+  doctorName,
+}): ReactNode => {
+  const { city, remainingAddress } = extractCityAndAddress(address);
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>
+        <h2>آدرس و تلفن تماس</h2>
+
+        <div className={styles.report}>
+          <MingcutePencilLine />
+          <span>گزارش تلفن و آدرس صحیح</span>
+        </div>
+      </div>
+
+      <CardComponent>
+        <div className={styles.contact}>
+          <strong>مطب دکتر {doctorName}</strong>
+          <address>
+            <span>{city} - </span>
+            <span>{remainingAddress}</span>
+          </address>
+
+          <div className={styles.action_btn}>
+            <ul>
+              <li>
+                <button>
+                  <MingcuteCalendar2Line />
+                  <span>برنامه کاری پزشک</span>
+                </button>
+              </li>
+
+              <li>
+                <a href="tel:02155635553">
+                  <button>
+                    <MingcutePhoneLine />
+                    <span>021-55635553</span>
+                  </button>
+                </a>
+              </li>
+
+              <li>
+                <button>
+                  <MingcuteLocationLine />
+                  <span>مشاهده در نقشه و مسیریابی</span>
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </CardComponent>
+    </div>
+  );
+};
+
+export default ContactComponent;

src/app/doctor/[[...slug]]/components/contact/contact.module.css

@@ -0,0 +1,96 @@
+.container {
+  display: grid;
+  gap: 1rem;
+
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+
+    h2 {
+      font-size: var(--fz-300);
+    }
+
+    .report {
+      display: flex;
+      justify-content: space-end;
+      align-items: center;
+      gap: 0.3rem;
+
+      font-size: var(--fz-100);
+
+      color: var(--color-primary-darker);
+
+      cursor: pointer;
+
+      svg {
+        inline-size: 1rem;
+        block-size: 1rem;
+      }
+    }
+  }
+
+  .contact {
+    background-color: var(--color-surface-400);
+    border-radius: var(--border-radius);
+
+    padding: 1rem;
+
+    strong {
+      display: inline-block;
+      font-size: var(--fz-300);
+      margin-block-end: 0.3rem;
+    }
+
+    address {
+      font-style: normal;
+      font-size: var(--fz-200);
+
+      span:first-of-type {
+        font-weight: bold;
+      }
+    }
+
+    .action_btn {
+      ul li {
+        margin-block-start: 1rem;
+
+        font-size: var(--fz-200);
+        font-weight: 600;
+      }
+
+      button {
+        inline-size: 100%;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 0.5rem;
+
+        background-color: inherit;
+        color: var(--color-primary-darker);
+
+        border-radius: 0.4rem;
+        border: 1px solid var(--color-primary);
+
+        padding-block: 0.8rem;
+        padding-inline: 1rem;
+
+        cursor: pointer;
+
+        transition: 0.2s ease-in-out;
+        transition-property: background-color, color;
+
+        &:hover {
+          background-color: var(--color-primary-fade);
+        }
+
+        svg {
+          inline-size: 1.4rem;
+          block-size: 1.4rem;
+        }
+      }
+    }
+  }
+}