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/clear-all-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 "./clear-all-filter.module.css";
+
+const ClearAllFilterComponent = (): ReactElement => {
+  const { clearAll } = useContext(FiltersContext);
+
+  return (
+    <CardComponent>
+      <div>
+        <button className={styles.clear} onClick={clearAll}>
+          حذف همه فیلترها
+        </button>
+      </div>
+    </CardComponent>
+  );
+};
+
+export default ClearAllFilterComponent;

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

@@ -0,0 +1,12 @@
+.clear {
+  width: 100%;
+  border-radius: var(--border-radius);
+
+  background-color: var(--color-danger);
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--color-danger-darker);
+  }
+}

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

@@ -0,0 +1,4 @@
+.filters {
+  display: grid;
+  gap: 1rem;
+}

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

@@ -0,0 +1,69 @@
+import { ReactElement } from "react";
+
+import ClearAllFilterComponent from "./clear-all-filter.component";
+import FilterComponent from "./filter.component";
+
+import { specialties } from "@/models/specialties";
+import { degrees } from "@/models/degrees";
+
+import { GenderEnums } from "@/enums/gender";
+import { FilterEnums } from "../../enums/filter.enum";
+
+import { isEmpty } from "@/utils/isEmpty";
+import { ResultObject } from "@/utils/convertListToObject";
+
+import styles from "./filter-wraper.component.module.css";
+
+type Props = {
+  selectedFilters: ResultObject;
+};
+
+const FilterWraperComponent = ({
+  selectedFilters = {},
+}: Props): ReactElement => {
+  return (
+    <div className={styles.filters}>
+      {!isEmpty(selectedFilters) && <ClearAllFilterComponent />}
+
+      <FilterComponent
+        filterName={FilterEnums.SPECIALTY}
+        title="تخصص‌ها"
+        options={specialties}
+        selectedFilters={selectedFilters}
+      />
+
+      <FilterComponent
+        filterName={FilterEnums.DEGREE}
+        title="درجه علمی"
+        options={degrees}
+        selectedFilters={selectedFilters}
+      />
+
+      <FilterComponent
+        filterName={FilterEnums.CITY}
+        title="شهر"
+        options={[
+          { id: "ardebil", en: "ardebil", fa: "اردبیل" },
+          { id: "zahedan", en: "zahedan", fa: "زاهدان" },
+          { id: "bandarabas", en: "bandarabas", fa: "بندرعباس" },
+          { id: "rasht", en: "rasht", fa: "رشت" },
+          { id: "tehran", en: "tehran", fa: "تهران" },
+        ]}
+        selectedFilters={selectedFilters}
+      />
+
+      <FilterComponent
+        filterName={FilterEnums.GENDER}
+        title="جنسیت"
+        options={[
+          { id: "male", en: GenderEnums.MALE, fa: "مرد" },
+          { id: "female", en: GenderEnums.FEMALE, fa: "زن" },
+          { id: "both", en: GenderEnums.BOTH, fa: "زن و مرد" },
+        ]}
+        selectedFilters={selectedFilters}
+      />
+    </div>
+  );
+};
+
+export default FilterWraperComponent;

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 = {
+  filterName: FilterEnums;
+  title: string;
+  options?: { id: string; en: string; fa: string }[];
+  selectedFilters: ResultObject;
+};
+
+const FilterComponent = ({
+  filterName,
+  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(filterName, 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/item/item.component.tsx

@@ -0,0 +1,69 @@
+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}>
+            <span className={styles.star}>
+              <MingcuteStarFill />
+            </span>
+            <span>{item.averageRating}</span>
+            &nbsp; ({item.totalVotes} نظر)
+          </span>
+        </div>
+      </div>
+      <div className={styles.badge}>
+        {item.badges.map((item, index) => (
+          <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,116 @@
+.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);
+
+    .star {
+      color: var(--color-warning);
+      margin-top: 2px;
+    }
+  }
+
+  .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);
+    }
+  }
+}