Files
ipd-shomalhospital/src/app/[lang]/doctors/page.tsx
2025-11-19 14:30:11 +03:30

120 lines
4.4 KiB
TypeScript

import {DoctorDataType, languages_types} from "@/types";
import DoctorsFilterBox from "@/ui/forms/DoctorsFilterBox";
import PageHeaderSlider from "@/ui/page-header-slider/PageHeaderSlider";
import {toPersianNumber} from "@/utils/functions";
import Image from "next/image";
import React from "react";
import {getDictionary} from "../dictionaries";
import {Metadata} from "next";
import {pages_titles} from "@/constants";
export const metadata: Metadata = {
title: pages_titles.doctors["fa"] + " | " + "بیمارستان شمال",
description: "Shomal Hospital IPD Doctors page",
};
export default async function DoctorsPage({
params,
searchParams,
}: {
params: Promise<{lang: languages_types}>;
searchParams: Promise<{page: string; name: string; expertise: string}>;
}) {
const {lang} = await params;
const {name = "", expertise = ""} = await searchParams;
const {
our_doctors,
license_number,
search_by_name,
search,
select_expertise,
doctors,
} = await getDictionary(lang);
const filteredData = doctors.filter((doctor) => {
const nameMatch = name
? Object.values(doctor.fullname.toString())
.join(" ")
.toLowerCase()
.includes(name.toLowerCase())
: true;
const expertiseMatch = expertise
? doctor.category.id.toString() === expertise
: true;
return nameMatch && expertiseMatch;
});
return (
<>
<PageHeaderSlider
lang={lang}
pageTitle={our_doctors}
imageSrc="/header-slider-1.webp"
/>
<div className="my-16 container">
<div className="bg-[#F8F9FA] rounded-4xl lg:px-20 md:py-16 py-4">
<h3 className="lg:text-[3em] text-2xl font-black text-blue-primary text-center relative before:absolute before:w-[100px] before:block before:bg-secondary before:-bottom-5 before:h-[2px] before:left-[50%] before:translate-x-[-50%] ">
{our_doctors}
</h3>
<DoctorsFilterBox
lang={lang}
defaultName={name}
defaultExpertise={expertise}
dict={{search, search_by_name, select_this: select_expertise}}
/>
<div className="grid grid-cols-4 gap-10 mt-10 ">
{filteredData?.map((doctor) => (
<div
key={doctor.id}
className="lg:col-span-1 col-span-4 rounded-2xl border-[1px] border-neutral-200 overflow-hidden relative"
>
<div className="lg:h-[250px] h-[250px] relative before:absolute before:bottom-0 before:bg-gradient-to-t before:from-white before:to-transparent before:z-10 before:w-full before:h-full before:top-0 before:right-0">
<Image
src={doctor.image !=="#" ? `/${doctor.image}` : "/doctor.jpg"}
fill
alt=""
className="object-fill"
/>
<span className="absolute top-2 right-2 p-2 rounded-full text-center text-xs font-semibold bg-blue-primary text-white flex items-center whitespace-nowrap">
{doctor.category.name.toString()}
</span>
</div>
<div className=" h-full px-6 py-10 space-y-2 bg-white">
<h3 className="lg:text-xl text-lg font-black text-black">
{doctor.fullname.toString()}
</h3>
<div>
<div className="text-secondary">
<ul className="space-y-[2px]">
{doctor.specialties.map((item) => (
<li
key={item.id}
className="list-inside list-disc md:text-base text-sm font-medium"
>
{item.name.toString()}
</li>
))}
</ul>
</div>
</div>
<div>
<span className="text-black text-sm font-medium">
{license_number} :{" "}
{lang === "en"
? doctor?.doctor_identify_number
: toPersianNumber(
String(doctor?.doctor_identify_number)
)}
</span>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</>
);
}