Lesson 4

package.json

@@ -14,7 +14,8 @@
     "clsx": "^2.1.1",
     "next": "14.2.20",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "sharp": "^0.33.5"
   },
   "devDependencies": {
     "@types/node": "^20",

src/app/doctors/[[...slug]]/components/filter/filter.component.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { ReactElement, useContext } from "react";
+
+import { FiltersContext } from "../../providers/Filters/filters.provider";
+
+import CardComponent from "@/components/card/card.component";
+import FilterButtonComponent from "@/components/filter-button/filter-button.component";
+
+import { ResultObject } from "@/utils/convertListToObject";
+import { FilterEnums } from "../../enums/filter.enum";
+
+import styles from "./filter.module.css";
+
+type Props = {
+  typeFilter: FilterEnums;
+  title: string;
+  options?: { id: string; en: string; fa: string }[];
+  selectedFilters: ResultObject;
+};
+
+const FilterComponent = ({
+  typeFilter,
+  title,
+  options = [],
+  selectedFilters = {},
+}: Props): ReactElement => {
+  const { changeFilter } = useContext(FiltersContext);
+
+  return (
+    <CardComponent>
+      <div className={styles.filter}>
+        <div className={styles.title}>{title}</div>
+        <div className={styles.buttons}>
+          {options.map((option) => (
+            <FilterButtonComponent
+              key={option.id}
+              isActive={Object.values(selectedFilters).includes(option.en)}
+              onClick={() => changeFilter(typeFilter, option.en)}
+            >
+              {option.fa}
+            </FilterButtonComponent>
+          ))}
+        </div>
+      </div>
+    </CardComponent>
+  );
+};
+
+export default FilterComponent;

src/app/doctors/[[...slug]]/components/filter/filter.module.css

@@ -0,0 +1,17 @@
+.filter {
+  .title {
+    font-weight: 900;
+  }
+
+  .buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+
+    margin-block-start: 0.5rem;
+
+    > * {
+      flex: 1 0 auto;
+    }
+  }
+}

src/app/doctors/[[...slug]]/components/filter/remove-filter.component.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { ReactElement, useContext } from "react";
+
+import { FiltersContext } from "../../providers/Filters/filters.provider";
+
+import CardComponent from "@/components/card/card.component";
+
+import styles from "./remove-filter.module.css";
+
+const RemoveAllFilterComponent = (): ReactElement => {
+  const { clearAll } = useContext(FiltersContext);
+
+  return (
+    <CardComponent>
+      <div>
+        <button className={styles.remove} onClick={clearAll}>
+          حذف همه فیلترها
+        </button>
+      </div>
+    </CardComponent>
+  );
+};
+
+export default RemoveAllFilterComponent;

src/app/doctors/[[...slug]]/components/filter/remove-filter.module.css

@@ -0,0 +1,12 @@
+.remove {
+  width: 100%;
+  border-radius: var(--border-radius);
+
+  background-color: rgb(188, 67, 67);
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgb(175, 42, 42);
+  }
+}

src/app/doctors/[[...slug]]/components/item/item.component.tsx

@@ -0,0 +1,67 @@
+import { ReactElement } from "react";
+
+import Image from "next/image";
+
+import { MingcuteStarFill } from "@/icons/MingcuteStarFill";
+
+import { DoctorModel } from "@/types/doctor.type";
+import { GenderEnums } from "@/enums/gender";
+
+import maleImg from "@/assets/fallback-images/portrait-3d-male-doctor.jpg";
+import femaleImg from "@/assets/fallback-images/portrait-3d-female-doctor.jpg";
+
+import styles from "./item.module.css";
+import { MingcuteLocationFill } from "@/icons/MingcuteLocationFill";
+import { MingcuteArrowLeftLine } from "@/icons/MingcuteArrowLeftLine";
+
+type Props = {
+  item: DoctorModel;
+};
+
+const ItemComponent = ({ item }: Props): ReactElement => {
+  return (
+    <li className={styles.item}>
+      <div className={styles.info}>
+        <Image
+          src={
+            item?.image ||
+            (item.gender.en === GenderEnums.MALE ? maleImg : femaleImg)
+          }
+          width={80}
+          height={80}
+          alt={item.name}
+          className={styles.image}
+        />
+        <div className="">
+          <h2 className={styles.name}>{item.name}</h2>
+          <p className={styles.brief}>{item.brief}</p>
+          <span className={styles.rate}>
+            <MingcuteStarFill color="#FFF200" />
+            <span>{item.averageRating}</span>
+            &nbsp; ({item.totalVotes} نظر)
+          </span>
+        </div>
+      </div>
+      <div className={styles.badge}>
+        {item.badges.map((item: string, index: number) => (
+          <span className={styles.badge_item} key={index}>
+            {item}
+          </span>
+        ))}
+      </div>
+      <div className={styles.address}>
+        <address>
+          <MingcuteLocationFill />
+          {item.address}
+        </address>
+      </div>
+
+      <button>
+        <span>دریافت نوبت</span>
+        <MingcuteArrowLeftLine />
+      </button>
+    </li>
+  );
+};
+
+export default ItemComponent;

src/app/doctors/[[...slug]]/components/item/item.module.css

@@ -0,0 +1,111 @@
+.item {
+  position: relative;
+
+  padding: 1rem;
+  height: auto;
+
+  background-color: var(--color-gray-20);
+
+  border-radius: 0.5rem;
+
+  .info {
+    display: flex;
+    justify-content: start;
+    align-items: start;
+    gap: 0.8rem;
+  }
+
+  .image {
+    border-radius: 0.7rem;
+    border: 0.24rem solid var(--color-gray-98);
+  }
+
+  .name {
+    font-size: var(--fz-400);
+  }
+
+  .brief {
+    margin-top: 0.2rem;
+    font-size: var(--fz-200);
+  }
+
+  .rate {
+    display: flex;
+    align-items: center;
+    gap: 0.15rem;
+
+    background-color: var(--color-gray-30);
+
+    width: fit-content;
+
+    padding-block: 0.1rem;
+    padding-inline: 0.2rem;
+    margin-top: 0.4rem;
+    border-radius: 0.2rem;
+
+    font-size: var(--fz-100);
+  }
+
+  .badge {
+    display: flex;
+    justify-content: start;
+    gap: 0.4rem;
+
+    margin-block-start: 2rem;
+
+    .badge_item {
+      background-color: var(--color-gray-40);
+      width: fit-content;
+
+      font-size: var(--fz-100);
+
+      padding-block: 0.1rem;
+      padding-inline: 0.2rem;
+      border-radius: 0.2rem;
+    }
+  }
+
+  .address {
+    margin-block-start: 1.5rem;
+
+    address {
+      font-style: normal;
+      font-size: var(--fz-200);
+
+      display: flex;
+      align-items: start;
+      gap: 0.3rem;
+
+      svg {
+        flex-shrink: 0;
+        margin-top: 0.25rem;
+      }
+    }
+  }
+
+  button {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+
+    display: flex;
+    align-items: center;
+    gap: 0.15rem;
+
+    background-color: var(--color-primary);
+
+    border: none;
+    border-radius: 0.2rem;
+
+    padding: 0.3rem;
+    cursor: pointer;
+
+    transition: 0.2s ease-in-out;
+    transition-property: background-color, color;
+
+    &:hover {
+      background-color: var(--color-primary-fade);
+      color: var(--color-primary-opposite);
+    }
+  }
+}

src/app/doctors/[[...slug]]/components/list/list.component.tsx

@@ -0,0 +1,32 @@
+import { ReactElement } from "react";
+
+import ItemComponent from "../item/item.component";
+
+import { DoctorModel } from "@/types/doctor.type";
+
+import styles from "./list.module.css";
+import Link from "next/link";
+
+const ListComponent = ({
+  doctors,
+}: {
+  doctors: DoctorModel[];
+}): ReactElement => {
+  return (
+    <>
+      {doctors.length !== 0 ? (
+        <ul className={styles.container}>
+          {doctors.map((item: DoctorModel) => (
+            <Link key={item.id} href={{ pathname: `/doctor/${item.id}` }}>
+              <ItemComponent item={item} />
+            </Link>
+          ))}
+        </ul>
+      ) : (
+        <p>متاسفیم. درحال حاظر پزشکی وجود ندارد!</p>
+      )}
+    </>
+  );
+};
+
+export default ListComponent;

src/app/doctors/[[...slug]]/components/list/list.module.css

@@ -0,0 +1,4 @@
+.container > a:not(:last-child) {
+  margin-bottom: 1rem;
+  display: block;
+}

src/app/doctors/[[...slug]]/enums/filter.enum.ts

@@ -0,0 +1,7 @@
+export enum FilterEnums {
+  GENDER = "gender",
+  SPECIALTY = "specialty",
+  CITY = "city",
+  DEGREE = "degree",
+  NEXT_APPOINTMENT = "nextAppointments",
+}

src/app/doctors/[[...slug]]/page.module.css

@@ -0,0 +1,19 @@
+.page {
+  display: grid;
+  grid-template-columns: 1.5fr 4fr;
+  align-items: start;
+  gap: 1rem;
+
+  margin-block-end: 2rem;
+
+  .filters {
+    display: grid;
+    gap: 1rem;
+  }
+}
+
+.search {
+  display: flex;
+  justify-content: center;
+  margin-block-end: 3rem;
+}