webserver-lab/ipd-shomalhospital
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive

Browse Source
This commit is contained in:
romiz5269
2025-11-19 08:15:17 +03:30
parent 4aa26ed219
commit f935aecd09
14 changed files with 217 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/app/[lang]/contact-us/page.tsx
View File

@@ -27,15 +27,15 @@ export default async function ContactUs({
imageSrc="/header-slider-1.webp" imageSrc="/header-slider-1.webp"
/> />
<section className="mt-16 container"> <section className="mt-16 container">
<div className="bg-[#F8F9FA] rounded-4xl px-20 py-16"> <div className="bg-[#F8F9FA] rounded-4xl md:px-20 px-4 md:py-16 py-4">
<div className="grid grid-cols-12 items-center"> <div className="grid grid-cols-12 items-center">
<div className="col-span-8 grid grid-cols-12 gap-x-20"> <div className="md:col-span-8 col-span-12 grid grid-cols-12 md:gap-x-20">
<div className="col-span-3"> <div className="md:col-span-3 col-span-12 bg-amber-50">
<div className="relative h-[200px] w-[200px] rounded-xl overflow-hidden"> <div className="relative md:h-[200px] h-[250px] md:w-[200px] w-full rounded-xl overflow-hidden ">
<Image fill src={"/heidarnejad.jpg"} alt="doctor" /> <Image fill src={"/heidarnejad.jpg"} alt="doctor" className="object-fill" />
</div> </div>
</div> </div>
<div className="col-span-9 h-full items-center"> <div className="md:col-span-9 col-span-12 items-center md:my-0 my-4">
<div className="flex flex-col items-start justify-center gap-y-4"> <div className="flex flex-col items-start justify-center gap-y-4">
<h3 className="text-3xl font-black text-blue-primary"> <h3 className="text-3xl font-black text-blue-primary">
{about_page?.heidarnejad?.name} {about_page?.heidarnejad?.name}
@@ -49,17 +49,17 @@ export default async function ContactUs({
</div> </div>
</div> </div>
</div> </div>
<div className="col-span-4 h-full"> <div className="md:col-span-4 col-span-12 h-full">
<div className="bg-secondary p-8 rounded-xl h-full grid grid-cols-2 items-center"> <div className="bg-secondary p-8 rounded-xl h-full grid grid-cols-2 items-center">
<div className="col-span-1 flex flex-col justify-start items-center gap-y-4"> <div className="md:col-span-1 col-span-12 flex flex-col justify-start items-center gap-y-4">
<span className="text-white"> <span className="text-white">
<TelephoneSvg size="60" /> <TelephoneSvg size="60" />
</span> </span>
<span className="text-lg text-white font-semibold"> <span className="text-lg text-white font-semibold">
{footer?.contact_us?.ipd_technician_number} <a href={`tel:${footer?.contact_us?.ipd_technician_number}`}>{footer?.contact_us?.ipd_technician_number}</a>
</span> </span>
</div> </div>
<div className="col-span-1 flex flex-col justify-start items-center gap-y-4"> <div className="md:col-span-1 col-span-12 flex flex-col justify-start items-center gap-y-4">
<span className="text-white"> <span className="text-white">
<svg <svg
width="60" width="60"
@@ -75,7 +75,7 @@ export default async function ContactUs({
</svg> </svg>
</span> </span>
<span className="text-lg text-white font-semibold"> <span className="text-lg text-white font-semibold">
{default_info.email} <a href={`mailto:${default_info.email}`}>{default_info.email}</a>
</span> </span>
</div> </div>
</div> </div>
@@ -84,13 +84,13 @@ export default async function ContactUs({
</div> </div>
</section> </section>
<section className="mt-16 container"> <section className="mt-16 container">
<div className="bg-[#F8F9FA] rounded-4xl px-20 py-16"> <div className="bg-[#F8F9FA] rounded-4xl md:px-20 px-4 md:py-16 py-4">
<h3 className="text-[3em] 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%] "> <h3 className="md: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%] ">
{contact_us_page?.info_box_title} {contact_us_page?.info_box_title}
</h3> </h3>
<div className="mt-16"> <div className="mt-16">
<div className="grid grid-cols-12 gap-x-4"> <div className="grid grid-cols-12 gap-x-4">
<div className="col-span-6 space-y-8"> <div className="md:col-span-6 col-span-12 space-y-8">
<div className="flex items-center gap-x-4"> <div className="flex items-center gap-x-4">
<div className="w-[70px] h-[70px] flex items-center justify-center rounded-2xl bg-secondary"> <div className="w-[70px] h-[70px] flex items-center justify-center rounded-2xl bg-secondary">
<span> <span>
@@ -190,7 +190,7 @@ export default async function ContactUs({
</a> </a>
</div> </div>
</div> </div>
<div className="col-span-6"> <div className="md:col-span-6 col-span-12 md:mt-0 mt-8">
<iframe <iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6419.524849772638!2d52.347594!3d36.439127!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f8fbd6849bf386b%3A0x26cbc9441b00f373!2sShomal%20Hospital!5e0!3m2!1sen!2sus!4v1762836982418!5m2!1sen!2sus" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6419.524849772638!2d52.347594!3d36.439127!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3f8fbd6849bf386b%3A0x26cbc9441b00f373!2sShomal%20Hospital!5e0!3m2!1sen!2sus!4v1762836982418!5m2!1sen!2sus"
width="100%" width="100%"
@@ -211,10 +211,10 @@ export default async function ContactUs({
className="lg:mb-24 mb-10 lg:mt-10 mt-4 container " className="lg:mb-24 mb-10 lg:mt-10 mt-4 container "
> >
<div className="bg-[#F8F9FA] rounded-4xl lg:px-40 lg:py-16 p-2"> <div className="bg-[#F8F9FA] rounded-4xl lg:px-40 lg:py-16 p-2">
<h3 className="lg:text-[3em] text-3xl 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%] "> <h3 className="mb-10 lg:text-[3em] text-3xl 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%] ">
{accept_request_form?.head_text} {accept_request_form?.head_text}
</h3> </h3>
<p className="text-center lg:text-[1.2rem] leading-8 text-[#454547] mt-10"> <p className="text-center lg:text-[1.2rem] leading-8 text-[#454547] ">
{about_page?.form?.sub_text} {about_page?.form?.sub_text}
</p> </p>
<PatientAcceptForm lang={lang} dict={about_page} /> <PatientAcceptForm lang={lang} dict={about_page} />

1
src/app/[lang]/dictionaries/ar.json
View File

@@ -2,6 +2,7 @@
"products": { "products": {
"cart": "أضف إلى السلة" "cart": "أضف إلى السلة"
}, },
"select_expertise":"اختر التخصص",
"about_page": { "about_page": {
"page_title": "من نحن", "page_title": "من نحن",
"introduction": "مقدمة عن قسم المرضى الدوليين", "introduction": "مقدمة عن قسم المرضى الدوليين",

2
src/app/[lang]/dictionaries/en.json
View File

@@ -2,6 +2,8 @@
"products": { "products": {
"cart": "Add to Cart" "cart": "Add to Cart"
}, },
"select_expertise": "Select expertise ...",
"about_page": { "about_page": {
"page_title": "About Us", "page_title": "About Us",
"introduction": "Introduction to the International Patients Department", "introduction": "Introduction to the International Patients Department",

2
src/app/[lang]/dictionaries/fa.json
View File

@@ -174,6 +174,8 @@
"license_number": "شماره نظام پزشکی", "license_number": "شماره نظام پزشکی",
"search_by_name": "جستجو بر اساس نام پزشک", "search_by_name": "جستجو بر اساس نام پزشک",
"select_this": "انتخاب کنید", "select_this": "انتخاب کنید",
"select_expertise": "تخصص انتخاب کنید",
"search": "جستجو", "search": "جستجو",
"our_medical_packages": "<ul><li>💼 هماهنگی کامل پیش از ورود: هماهنگی با بیمارستان شمال برای بررسی مدارک پزشکی، مشاوره با پزشکان متخصص و ارسال برآورد هزینه</li><li>🛬 پذیرش و استقبال از فرودگاه: ترانسفر اختصاصی از فرودگاه به بیمارستان یا هتل</li><li>🌐 مترجم همزمان: ارائه خدمات ترجمه به زبان‌های انگلیسی، عربی، کردی، ترکی و...</li><li>🏨 رزرو هتل و اقامتگاه: همکاری با هتل‌های هم‌سطح با استانداردهای بین‌المللی در نزدیکی بیمارستان</li><li>🧾 راهنمایی و پشتیبانی امور اداری: صدور دعوت‌نامه برای ویزای درمانی، راهنمایی در امور گمرکی و اقامت</li><li>👨‍⚕️ دسترسی سریع به پزشکان متخصص: کاملاً هماهنگ با بیمارستان شمال؛ نوبت‌دهی فوری و ارجاع مستقیم به بهترین پزشکان در هر تخصص</li><li>📋 پیگیری بعد از ترخیص: ارسال پرونده پزشکی، ارتباط با پزشک معالج و پاسخ به سوالات بعدی بیمار</li></ul>", "our_medical_packages": "<ul><li>💼 هماهنگی کامل پیش از ورود: هماهنگی با بیمارستان شمال برای بررسی مدارک پزشکی، مشاوره با پزشکان متخصص و ارسال برآورد هزینه</li><li>🛬 پذیرش و استقبال از فرودگاه: ترانسفر اختصاصی از فرودگاه به بیمارستان یا هتل</li><li>🌐 مترجم همزمان: ارائه خدمات ترجمه به زبان‌های انگلیسی، عربی، کردی، ترکی و...</li><li>🏨 رزرو هتل و اقامتگاه: همکاری با هتل‌های هم‌سطح با استانداردهای بین‌المللی در نزدیکی بیمارستان</li><li>🧾 راهنمایی و پشتیبانی امور اداری: صدور دعوت‌نامه برای ویزای درمانی، راهنمایی در امور گمرکی و اقامت</li><li>👨‍⚕️ دسترسی سریع به پزشکان متخصص: کاملاً هماهنگ با بیمارستان شمال؛ نوبت‌دهی فوری و ارجاع مستقیم به بهترین پزشکان در هر تخصص</li><li>📋 پیگیری بعد از ترخیص: ارسال پرونده پزشکی، ارتباط با پزشک معالج و پاسخ به سوالات بعدی بیمار</li></ul>",
"medical_packages_headTitle": "خدمات پزشکی ما", "medical_packages_headTitle": "خدمات پزشکی ما",

8
src/app/[lang]/doctors/page.tsx
View File

@@ -21,7 +21,7 @@ export default async function DoctorsPage({
}) { }) {
const {lang} = await params; const {lang} = await params;
const {name = "", expertise = ""} = await searchParams; const {name = "", expertise = ""} = await searchParams;
const {our_doctors,license_number,search_by_name,search,select_this,doctors}=await getDictionary(lang) const {our_doctors,license_number,search_by_name,search,select_expertise,doctors}=await getDictionary(lang)
const filteredData = doctors.filter((doctor) => { const filteredData = doctors.filter((doctor) => {
const nameMatch = name const nameMatch = name
? Object.values(doctor.fullname.toString()) ? Object.values(doctor.fullname.toString())
@@ -45,7 +45,7 @@ export default async function DoctorsPage({
imageSrc="/header-slider-1.webp" imageSrc="/header-slider-1.webp"
/> />
<div className="my-16 container"> <div className="my-16 container">
<div className="bg-[#F8F9FA] rounded-4xl lg:px-20 py-16"> <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%] "> <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} {our_doctors}
</h3> </h3>
@@ -53,13 +53,13 @@ export default async function DoctorsPage({
lang={lang} lang={lang}
defaultName={name} defaultName={name}
defaultExpertise={expertise} defaultExpertise={expertise}
dict={{search,search_by_name,select_this}} dict={{search,search_by_name,select_this:select_expertise}}
/> />
<div className="grid grid-cols-4 gap-10 mt-10 "> <div className="grid grid-cols-4 gap-10 mt-10 ">
{filteredData?.map((doctor) => ( {filteredData?.map((doctor) => (
<div <div
key={doctor.id} key={doctor.id}
className="lg:col-span-1 col-span-3 rounded-2xl border-[1px] border-neutral-200 overflow-hidden relative" className="lg:col-span-1 col-span-4 rounded-2xl border-[1px] border-neutral-200 overflow-hidden relative"
> >
<div className="lg:h-[250px] h-[200px] 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"> <div className="lg:h-[250px] h-[200px] 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 <Image

4
src/app/[lang]/medical-services/[slug]/page.tsx
View File

@@ -26,8 +26,8 @@ export default async function SingleMedicalService({
imageSrc="/header-slider-1.webp" imageSrc="/header-slider-1.webp"
/> />
<section className="mt-16 container"> <section className="mt-16 container">
<div className="bg-[#F8F9FA] rounded-4xl px-20 py-16"> <div className="bg-[#F8F9FA] rounded-4xl md:px-20 px-4 md:py-16 py-4">
<h3 className="text-[3em] 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%] "> <h3 className="md:text-[3em] text-xl 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%] ">
انواع خدمات پزشکی {data?.title.toString()} انواع خدمات پزشکی {data?.title.toString()}
</h3> </h3>
<div className="mt-10 space-y-6"> <div className="mt-10 space-y-6">

8
src/app/[lang]/medical-services/page.tsx
View File

@@ -27,8 +27,8 @@ export default async function MedicalServices({
imageSrc="/header-slider-1.webp" imageSrc="/header-slider-1.webp"
/> />
<section className="mb-24 mt-10 container "> <section className="mb-24 mt-10 container ">
<div className="bg-[#F8F9FA] rounded-4xl px-40 py-16"> <div className="bg-[#F8F9FA] rounded-4xl md:px-40 px-4 md:py-16 py-4">
<h3 className="text-[3em] 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%] "> <h3 className="md: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%] ">
{medical_packages_headTitle} {medical_packages_headTitle}
</h3> </h3>
<div className="mt-16"> <div className="mt-16">
@@ -36,14 +36,14 @@ export default async function MedicalServices({
</p> </p>
<br /> <br />
<br /> */} <br /> */}
<div className="introduction_description_subText" dangerouslySetInnerHTML={{__html:our_medical_packages}}/> <div className="introduction_description_subText " dangerouslySetInnerHTML={{__html:our_medical_packages}}/>
<div className="w-full mt-20 grid grid-cols-12 gap-6"> <div className="w-full mt-20 grid grid-cols-12 gap-6">
{medical_packages_data.map((item) => { {medical_packages_data.map((item) => {
const LazyComponent = lazy( const LazyComponent = lazy(
() => import(`@/ui/components/icons/${item.svg}.tsx`) () => import(`@/ui/components/icons/${item.svg}.tsx`)
); );
return ( return (
<div className="col-span-4" key={item.id}> <div className="md:col-span-4 col-span-12" key={item.id}>
<Link <Link
href={`/medical-services/${item.slug}`} href={`/medical-services/${item.slug}`}
className="flex flex-col items-center justify-center py-10 w-full h-full rounded-xl border-[1px] border-neutral-200 bg-white hover:border-secondary" className="flex flex-col items-center justify-center py-10 w-full h-full rounded-xl border-[1px] border-neutral-200 bg-white hover:border-secondary"

4
src/app/[lang]/patient-rights-charter/page.tsx
View File

@@ -23,8 +23,8 @@ export default async function PatientRights({
imageSrc="/header-slider-1.webp" imageSrc="/header-slider-1.webp"
/> />
<section className="my-16 container"> <section className="my-16 container">
<div className="bg-[#F8F9FA] rounded-4xl px-20 py-16"> <div className="bg-[#F8F9FA] rounded-4xl md:px-20 px-4 md:py-16 py-4">
<h3 className="text-[3em] 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%] "> <h3 className="md: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%] ">
{patient_rights_charter?.page_title} {patient_rights_charter?.page_title}
</h3> </h3>
<div className="mt-16"> <div className="mt-16">

2
src/app/globals.css
View File

@@ -106,7 +106,7 @@ body {
.gradient-slider { .gradient-slider {
} }
.introduction_description_subText ul { .introduction_description_subText ul {
@apply list-disc list-inside marker:text-secondary marker:text-2xl text-[1.2rem] space-y-2 text-[#454547]; @apply list-disc list-inside marker:text-secondary marker:text-2xl md:text-[1.2rem] space-y-6 text-[#454547];
} }
.packages_subpackages_list ul { .packages_subpackages_list ul {
@apply list-disc list-inside marker:text-secondary marker:text-2xl text-[1rem] space-y-1 text-[#454547]; @apply list-disc list-inside marker:text-secondary marker:text-2xl text-[1rem] space-y-1 text-[#454547];

16
src/ui/components/global/Accordion.tsx
View File

@@ -36,26 +36,26 @@ export default function Accordion({
return ( return (
<div className="w-full space-y-4 overflow-hidden"> <div className="w-full space-y-4 overflow-hidden">
<div key={index} className="p-4 bg-secondary rounded-2xl "> <div key={index} className="md:p-4 py-4 px-1 bg-secondary rounded-2xl ">
<button <button
className="flex w-full items-center justify-between text-right h-full cursor-pointer" className="flex w-full items-center justify-between text-right h-full cursor-pointer"
onClick={() => toggle(index)} onClick={() => toggle(index)}
> >
<span className="text-lg font-semibold text-white">{title}</span> <span className="md:text-lg text-sm font-semibold text-white">{title}</span>
<span <span
className={` text-white transition-all duration-300 ${ className={` text-white transition-all duration-300 ${
openIndex === index ? "rotate-90" : "-rotate-90" openIndex === index ? "rotate-90" : "-rotate-90"
}`} }`}
> >
<ChevronLeftSvg size="20" /> <ChevronLeftSvg size="16" />
</span> </span>
</button> </button>
<div> <div>
{openIndex === index && ( {openIndex === index && (
<div className="bg-white p-10 mt-10 space-y-10"> <div className="bg-white md:p-10 px-3 py-1 mt-10 space-y-10">
{thumbnail && ( {thumbnail && (
<div className="h-[600px] w-[80%] mx-auto relative border-[1px] border-neutral-200 rounded-2xl overflow-hidden"> <div className="md:h-[600px] h-[200px] w-[80%] mx-auto relative border-[1px] border-neutral-200 rounded-2xl overflow-hidden">
<Image <Image
src={`/packages/${thumbnail}`} src={`/packages/${thumbnail}`}
fill fill
@@ -66,7 +66,7 @@ export default function Accordion({
)} )}
{description && ( {description && (
<div <div
className="overflow-hidden text-gray-600 mt-2 leading-relaxed text-base" className="overflow-hidden text-gray-600 mt-2 leading-relaxed md:text-base text-sm"
dangerouslySetInnerHTML={{__html: description}} dangerouslySetInnerHTML={{__html: description}}
/> />
)} )}
@@ -101,11 +101,11 @@ export default function Accordion({
)} )}
<> <>
<h4 className="font-bold text-lg"> <h4 className="font-bold text-lg">
رزرو نوبت و مشاوره رايگان با پزشك و كارشناس IPD :
</h4> </h4>
<div className="overflow-hidden text-gray-600 leading-relaxed text-base "> <div className="overflow-hidden text-gray-600 leading-relaxed text-base ">
<div>ایمیل : <a href={`mailto:${default_info.email}`}>{default_info.email}</a></div> <div>ایمیل : <a href={`mailto:${default_info.email}`}>{default_info.email}</a></div>
<div>واتساپ : <a href={`https://wa.me/${+default_info.phone_number}`}></a></div> <div>واتساپ : <a href={`https://wa.me/${+default_info.phone_number}`}>{default_info.phone_number}</a></div>
</div> </div>
</> </>
</div> </div>

2
src/ui/components/global/CustomLink.tsx
View File

@@ -7,7 +7,7 @@ interface CustomLinkProps {
} }
export default function CustomLink({href, label, className}: CustomLinkProps) { export default function CustomLink({href, label, className}: CustomLinkProps) {
return ( return (
<Link href={href} className={className }> <Link href={href} className={className}>
{label} {label}
</Link> </Link>
); );

118
src/ui/components/menu/MobileMenu.tsx
View File

@@ -1,14 +1,24 @@
"use client"; "use client";
import {DefaultMenuLinks} from "@/constants/menu/menu.const";
import React, {useState} from "react"; import React, {useState} from "react";
import CustomLink from "../global/CustomLink";
import {languages_types} from "@/types";
import ChevronLeftSvg from "../icons/ChevronLeftSvg";
import {getHref} from "@/utils/functions";
export default function MobileMenu() { export default function MobileMenu({lang}: {lang: languages_types}) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [openIndex, setOpenIndex] = useState<number | null>(null);
const toggle = (index: number) => {
setOpenIndex(openIndex === index ? null : index);
};
return ( return (
<> <>
<button <button
type="button" type="button"
className="lg:hidden block text-blue-primary" className="lg:hidden block text-blue-primary"
onClick={()=>setOpen(!open)} onClick={() => setOpen(!open)}
> >
<svg <svg
stroke="currentColor" stroke="currentColor"
@@ -28,12 +38,104 @@ export default function MobileMenu() {
</svg> </svg>
</button> </button>
{open && ( {open && (
<div className="lg:hidden fixed top-0 right-0 z-50 bg-black/30 backdrop-blur-sm w-full h-full" onClick={(e)=>{ <div
e.stopPropagation(); className="lg:hidden fixed top-0 right-0 z-50 bg-black/30 backdrop-blur-sm w-full h-screen"
e.preventDefault(); onClick={(e) => {
setOpen(!open)
}}> setOpen(!open);
<div className={`absolute top-0 right-0 h-full ${open ? 'w-[80%]' : 'w-0'} bg-white transition-all duration-300`}></div> }}
>
<div
className={`absolute top-0 right-0 h-full ${
open ? "w-[80%]" : "w-0"
} bg-white transition-all duration-300`}
onClick={(e)=>e.stopPropagation()}
>
<div className="p-4">
<div className="w-full flex items-center justify-end">
<button className="" onClick={() => setOpen(!open)}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 24 24"
fill="none"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z"
fill="#0F1729"
/>
</svg>
</button>
</div>
<div className="mt-5">
{DefaultMenuLinks.map((link) => (
<div key={link.id} className="w-full h-fit">
{link.sub.length > 0 ? (
<div className="flex items-center justify-between">
<div className="w-full space-y-4 overflow-hidden">
<div
key={link.id}
className="rounded-2xl py-4"
>
<button
className="flex w-full items-center justify-between text-right h-full cursor-pointer"
onClick={() => toggle(link.id)}
>
<span >
{link.label[lang]}
</span>
<span
className={`transition-all duration-300 ${
openIndex === link.id
? "rotate-90"
: "-rotate-90"
}`}
>
<ChevronLeftSvg size="14" />
</span>
</button>
<div>
{openIndex === link.id && (
<div className="bg-neutral-200 p-4 mt-4 space-y-10 rounded-2xl">
<div className="overflow-hidden text-gray-600 mt-2 leading-relaxed text-base">
{link.sub.map((submenu) => (
<div
key={submenu.id}
className="w-full text-blue-primary hover:font-medium p-1 px-3"
>
<CustomLink
href={getHref(submenu.href, lang)}
label={submenu.label[lang]}
className="text-sm font-medium text-black hover:text-secondary transition-all"
/>
</div>
))}
</div>
</div>
)}
</div>
</div>
</div>
</div>
) : (
<div className="w-full flex">
<CustomLink
href={getHref(link.href, lang)}
label={link.label[lang]}
className="w-full py-4"
/>
</div>
)}
</div>
))}
</div>
</div>
</div>
</div> </div>
)} )}
</> </>

24
src/ui/components/top-menu/TopMenu.tsx
View File

@@ -9,10 +9,12 @@ import {languages_types} from "@/types";
import MobileMenu from "../menu/MobileMenu"; import MobileMenu from "../menu/MobileMenu";
import {getHref} from "@/utils/functions"; import {getHref} from "@/utils/functions";
export default function TopMenu({lang}: {lang: string}) { export default function TopMenu({lang}: {lang: languages_types}) {
const [isSticky, setIsSticky] = useState(false); const [isSticky, setIsSticky] = useState(false);
useEffect(() => { useEffect(() => {
if (window.innerWidth < 1024) return;
const handleScroll = () => { const handleScroll = () => {
if (window.scrollY > 50) { if (window.scrollY > 50) {
setIsSticky(true); setIsSticky(true);
@@ -25,8 +27,9 @@ export default function TopMenu({lang}: {lang: string}) {
return () => window.removeEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll);
}, []); }, []);
return ( return (
<>
<div <div
className={`w-full z-50 transition-all duration-300 container flex lg:justify-around justify-between items-center className={`w-full z-30 transition-all duration-300 container flex lg:justify-around justify-between items-center
${ ${
isSticky isSticky
? "h-[80px] lg:fixed top-0 custom-shadow backdrop-blur-3xl bg-white/80" ? "h-[80px] lg:fixed top-0 custom-shadow backdrop-blur-3xl bg-white/80"
@@ -57,14 +60,10 @@ export default function TopMenu({lang}: {lang: string}) {
</Link> </Link>
</div> </div>
<MobileMenu /> <MobileMenu lang={lang} />
<div className="lg:grid hidden grid-cols-12 gap-x-1 w-full h-full items-center"> <div className="lg:grid hidden grid-cols-12 gap-x-1 w-full h-full items-center">
<div className="col-span-8 flex items-center justify-center w-full h-full"> <div className="col-span-8 flex items-center justify-center w-full h-full">
<Menu <Menu lang={lang} direction="horizontal" items={DefaultMenuLinks} />
lang={lang}
direction="horizontal"
items={DefaultMenuLinks}
/>
</div> </div>
<div className="col-span-4 flex items-center justify-center gap-x-5"> <div className="col-span-4 flex items-center justify-center gap-x-5">
{/* <a {/* <a
@@ -84,14 +83,18 @@ export default function TopMenu({lang}: {lang: string}) {
<CustomLink <CustomLink
href={getHref("/contact-us#request_accept", lang)} href={getHref("/contact-us#request_accept", lang)}
label={Menu_buttons.request_to_accept[lang as languages_types] || ""} label={
Menu_buttons.request_to_accept[lang as languages_types] || ""
}
className={`bg-blue-primary text-white rounded-full ${ className={`bg-blue-primary text-white rounded-full ${
isSticky ? "py-4 px-4" : "py-4 px-6" isSticky ? "py-4 px-4" : "py-4 px-6"
} text-sm font-semibold shadow-lg flex items-center whitespace-nowrap shadow-neutral-300 hover:shadow-none transition-all duration-200`} } text-sm font-semibold shadow-lg flex items-center whitespace-nowrap shadow-neutral-300 hover:shadow-none transition-all duration-200`}
/> />
<CustomLink <CustomLink
href={getHref("/upload-documents", lang)} href={getHref("/upload-documents", lang)}
label={Menu_buttons.upload_document[lang as languages_types] || ""} label={
Menu_buttons.upload_document[lang as languages_types] || ""
}
className={`bg-secondary text-white rounded-full ${ className={`bg-secondary text-white rounded-full ${
isSticky ? "py-4 px-4" : "py-4 px-6" isSticky ? "py-4 px-4" : "py-4 px-6"
} text-sm font-semibold shadow-lg flex items-center whitespace-nowrap shadow-neutral-300 hover:shadow-none transition-all duration-200`} } text-sm font-semibold shadow-lg flex items-center whitespace-nowrap shadow-neutral-300 hover:shadow-none transition-all duration-200`}
@@ -99,5 +102,6 @@ export default function TopMenu({lang}: {lang: string}) {
</div> </div>
</div> </div>
</div> </div>
</>
); );
} }

10
src/ui/forms/DoctorsFilterBox.tsx
View File

@@ -46,14 +46,16 @@ export default function DoctorsFilterBox({
return ( return (
<> <>
<div className="grid grid-cols-12 gap-4 mt-16"> <div className="grid grid-cols-12 gap-4 mt-16">
<div className="col-span-4"> <div className="md:col-span-4 col-span-12">
<CustomSelect <CustomSelect
value={expertise} // must be string value={expertise} // must be string
onChange={setExpertise} // returns string onChange={setExpertise} // returns string
options={options} options={options}
className="bg-white" className="bg-white mt-2"
isClearable isClearable
placeholder={dict.select_this} placeholder={dict.select_this}
/> />
</div> </div>
<div className="col-span-5"> <div className="col-span-5">
@@ -66,11 +68,11 @@ export default function DoctorsFilterBox({
/> */} /> */}
</div> </div>
<div className="col-span-3"> <div className="md:col-span-3 col-span-12">
<button <button
type="button" type="button"
onClick={applyFilters} onClick={applyFilters}
className="bg-blue-primary text-white font-medium w-full h-full rounded-2xl cursor-pointer" className="bg-blue-primary text-white font-medium w-full h-full rounded-2xl cursor-pointer md:py-0 py-4"
> >
{dict.search} {dict.search}
</button> </button>