Lesson 5

next.config.mjs

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

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
+    "dompurify": "^3.2.4",
     "next": "14.2.20",
     "react": "^18",
     "react-dom": "^18",

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

@@ -0,0 +1,33 @@
+"use client";
+
+import { ReactNode } from "react";
+
+import DOMPurify from "dompurify";
+
+import CardComponent from "@/components/card/card.component";
+
+import styles from "./about.module.css";
+
+type Props = {
+  aboutText: string;
+};
+
+const AboutComponent: React.FC<Props> = ({ aboutText }): ReactNode => {
+  const sanitizedHTML = DOMPurify.sanitize(aboutText ?? "");
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.title}>
+        <h2>درباره دکتر</h2>
+      </div>
+      <CardComponent>
+        <div
+          dangerouslySetInnerHTML={{ __html: sanitizedHTML }}
+          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: 2rem;
+    }
+  }
+}

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: 1rem;
+
+      svg {
+        inline-size: 1.5rem;
+        block-size: 1.5rem;
+      }
+      .consulation_count {
+        font-weight: 600;
+      }
+    }
+
+    ul li:not(:first-child) {
+      margin-block-start: 0.8rem;
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+import { ReactElement } from "react";
+
+import CardComponent from "@/components/card/card.component";
+import { MingcuteAIFill } from "@/icons/MingcuteAIFill";
+
+import styles from "./characteristics.module.css";
+
+type Props = {
+  doctorName: string;
+  characteristics: string[];
+};
+
+const CharacteristicsComponent: React.FC<Props> = ({
+  doctorName,
+  characteristics,
+}): ReactElement => {
+  return (
+    <div className={styles.characteristics}>
+      <div className={styles.title}>
+        <h2>ویژگی‌های دکتر {doctorName}</h2>
+      </div>
+      <CardComponent>
+        <div className={styles["characteristics-item"]}>
+          <ul>
+            {characteristics?.map((characteristic, index) => {
+              return (
+                <li key={index}>
+                  <MingcuteAIFill />
+                  {characteristic}
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </CardComponent>
+    </div>
+  );
+};
+
+export default CharacteristicsComponent;

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

@@ -0,0 +1,41 @@
+.characteristics {
+  display: grid;
+  gap: 1rem;
+
+  .title {
+    h2 {
+      font-size: var(--fz-300);
+    }
+  }
+
+  .characteristics-item {
+    ul {
+      border-right: 2px dotted var(--color-gray-80);
+
+      padding-inline-start: 0.75rem;
+
+      font-size: var(--fz-200);
+      line-height: 1.5rem;
+
+      li {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+
+        svg {
+          inline-size: 1rem;
+          block-size: 1rem;
+        }
+      }
+
+      li span {
+        font-weight: 600;
+        font-size: var(--fz-300);
+      }
+    }
+
+    ul li:not(:first-child) {
+      margin-block-start: 0.5rem;
+    }
+  }
+}

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;