hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive page doctor item & page booking

Browse Source
This commit is contained in:
Ehsan
2024-08-29 03:18:01 +03:30
parent 6384dd10b6
commit 707206450c
10 changed files with 96 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/clinic/components/about/index.js
+1
View File
@@ -1,4 +1,5 @@
import { useState } from "react";
import ListBime from "./ListBime";
import Services from "./Services";
import Images from "./iamges/Images";
components/clinic/components/contact/index.js
+5 -5
View File
@@ -2,7 +2,7 @@ import { useState } from "react";
import RoutingWhiteC from "@/components/icons/RoutingWhiteC";
import { Button } from "@mui/material";
import ModalSearchCity from "./modal";
import ModalOpenLocation from "./modal";
import Detail from "./Detail";
import RoutingC from "@/components/icons/RoutingC";
@@ -22,7 +22,7 @@ function Contact({ data }) {
>
<div className="flex items-end justify-between">
<Detail data={data} />
<ModalSearchCity
<ModalOpenLocation
open={open}
setOpen={setOpen}
handleClose={handleClose}
@@ -35,7 +35,7 @@ function Contact({ data }) {
<RoutingC />
مسیریابی
</Button>
</ModalSearchCity>
</ModalOpenLocation>
</div>
<div
className="w-full relative h-[460px] mt-[24px]"
@@ -45,7 +45,7 @@ function Contact({ data }) {
className='w-full h-full rounded-lg'
loading="lazy"
></iframe>
<ModalSearchCity
<ModalOpenLocation
open={open}
setOpen={setOpen}
handleClose={handleClose}
@@ -56,7 +56,7 @@ function Contact({ data }) {
>
<RoutingWhiteC />
</Button>
</ModalSearchCity>
</ModalOpenLocation>
</div>
</div>
)
components/clinic/components/contact/modal/index.js
+2 -2
View File
@@ -4,7 +4,7 @@ import { Drawer, Modal } from "@mui/material";
import { styleDefault } from "@/mui";
import Content from "./Content";
function ModalSearchCity({ open, setOpen, handleClose, children }) {
function ModalOpenLocation({ open, setOpen, handleClose, children }) {
const toggleDrawer = (newOpen) => () => {
setOpen(newOpen);
@@ -48,4 +48,4 @@ function ModalSearchCity({ open, setOpen, handleClose, children }) {
)
}
export default ModalSearchCity
export default ModalOpenLocation
components/doctor/appointmentList/ItemAppointment.js
+2 -2
View File
@@ -25,7 +25,7 @@ function ItemAppointment({ turn, doctor }) {
<p className="text-[#525252] text-[14px] font-medium">تخصص: {doctor.expertise}</p>
</div>
</div>
<div className='flex mt-5 items-center justify-between'>
<div className='flex mt-5 gap-2 items-center justify-between'>
<div className='flex items-start justify-start gap-1'>
<GreenCalendarTurn />
<p className='text-[#05BA58] text-[12px] font-medium'>اولین نوبت آزاد: {turn.first_free_turn}</p>
@@ -33,7 +33,7 @@ function ItemAppointment({ turn, doctor }) {
<Link href={`/booking/${turn.id}`}>
<Button
variant='contained'
className='!py-2 !px-6 gap-1'
className='!py-2 !px-3 xl:!px-6 gap-1'
>
دریافت نوبت
<div className='w-[20px] h-[20px]'>
components/doctor/detailDoctor/Link.js
+29 -22
View File
@@ -13,30 +13,37 @@ function Link() {
const [activeId, setActiveId] = useState(0);
return (
<ul className="flex items-center justify-start mt-[56px] mb-[32px]">
{listLink.map((item, idx) => (
<li
key={idx}
className="flex"
>
<a href={`#${item.link}`}>
<Button
onClick={() => setActiveId(idx)}
className={`!text-[20px] !font-bold !p-1
<>
<span className="block bg-[#EFEFEF] h-px w-full my-[16px] lg:my-0 lg:bg-transparent"></span>
<ul className="flex items-center justify-evenly lg:justify-start mb-[32px]">
{listLink.map((item, idx) => (
<li
key={idx}
className="flex w-full lg:w-fit relative"
>
<a
href={`#${item.link}`}
className="mx-auto"
>
<Button
onClick={() => setActiveId(idx)}
className={`!text-[20px] !text-center !font-bold !p-1
${activeId === idx ? '!text-[#F17732]' : '!text-[#525252]'}
`}
variant="text">
{item.name}
</Button>
</a>
{listLink.length > idx + 1 && (
<span
className="block bg-[#BABABA] w-px h-[38px] lg:mx-[44px] xl:mx-[56px]"
></span>
)}
</li>
))}
</ul>
variant="text">
{item.name}
</Button>
</a>
{listLink.length > idx + 1 && (
<span
className="block border-transparent border-l border-dotted border-l-[#BABABA] w-px h-[38px] lg:mx-[44px] xl:mx-[56px]
absolute left-0 lg:relative"
></span>
)}
</li>
))}
</ul>
</>
)
}
components/doctor/detailDoctor/Title.js
+18 -12
View File
@@ -5,31 +5,37 @@ import Image from "next/image"
function Title({ doctor }) {
return (
<div className="flex items-center justify-start gap-8">
<div className="flex flex-col lg:flex-row items-center justify-start gap-[8px] lg:gap-[32px]">
<Image
className="
w-[40px] sm:w-[81px] md:w-[123px] lg:w-[164px]
h-[40px] sm:h-[81px] md:h-[123px] lg:h-[164px]
"
src={doctor.img}
width={164}
height={164}
alt="img-doctor"
height={164}
width={164}
/>
<div className="flex flex-col items-start gap-4">
<p className="text-[#3B3B3B] text-[20px] font-bold">{doctor.name}</p>
<p className="text-[#525252] text-[16px] font-medium">تخصص: {doctor.expertise}</p>
<div className="flex flex-col items-center lg:items-start gap-[8px] lg:gap-[16px]">
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">{doctor.name}</p>
<p className="text-[#525252] text-[14px] md:text-[16px] font-medium">تخصص: {doctor.expertise}</p>
<div className="flex items-center justify-start gap-11">
<p className="text-[#525252] text-[16px] font-medium">{doctor.experience} سال تجربه</p>
<div className="flex items-center gap-1">
<TickCircle />
<p className="text-[#525252] text-[16px] font-medium">کد نظام پزشکی: {doctor.medical_system_code}</p>
<div className="hidden lg:flex">
<TickCircle />
</div>
<p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-medium">کد نظام پزشکی: {doctor.medical_system_code}</p>
</div>
</div>
<div className="flex items-center justify-start gap-2">
<div className="flex p-1 gap-0.5 items-center justify-center">
<div className="flex p-1 gap-0.5 items-start justify-center">
<StarDI />
<p className="text-[#616161] text-[14px] font-normal">امتیاز: {doctor.point}</p>
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">امتیاز: {doctor.point}</p>
</div>
<div className="flex p-1 items-center gap-0.5">
<div className="flex p-1 items-start gap-0.5">
<LikeDI />
<p className="text-[#616161] text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
</div>
</div>
</div>
components/doctor/detailDoctor/cards/AboutDcotor.js
+30 -3
View File
@@ -1,13 +1,40 @@
'use client';
import { useState } from "react";
import { Button } from "@mui/material"
function AboutDcotor({ doctor }) {
const [isMore, setIsMore] = useState(false);
return (
<div>
<a
id="about-doctor"
className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
></a>
<p className="text-[#616161] text-[14px] font-normal text-justify">{doctor.detail}</p>
<div className="mt-2 mb-8">
<p className="text-[#525252] text-[16px] font-bold">تخصص ها</p>
<div className="flex flex-col items-center justify-center">
<p
className={`
text-[#616161] text-[14px] font-normal text-justify overflow-hidden relative
md:max-h-fit after:absolute after:right-0 after:bottom-0 after:h-[80px]
after:shadow-xl after:w-full transition-all duration-500 md:after:!bg-[linear-gradient(transparent,transparent)]
${isMore ?
'after:bg-transparent max-h-screen' :
'after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]'
}
`}
>{doctor.detail}</p>
<Button
className="!text-[#F17732] md:!hidden !text-[14px] !font-light !p-2"
onClick={() => setIsMore(!isMore)}
variant="text"
>
{isMore ? 'مطالعه کمتر' : 'مطالعه بیشتر'}
</Button>
</div>
<div className="mt-2 mb-6 md:mb-7 lg:mb-8">
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">تخصص ها</p>
<ul className="flex flex-wrap gap-y-1 items-center justify-start gap-4">
{doctor.specialties.map((item, idx) => (
<li className="flex items-center justify-start gap-1">
components/doctor/detailDoctor/cards/locations/Item.js
+6 -3
View File
@@ -39,16 +39,19 @@ function Item({ data }) {
'max-h-0'}
`}
>
<div className="gap-4 flex flex-col items-start mt-[24px]">
<div className="gap-3 md:gap-4 flex flex-col items-start mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px]">
<p className="text-[#525252] text-[16px] font-normal">آدرس: {data.address}</p>
<p className="text-[#525252] text-[16px] font-normal">تلفن: {data.phone}</p>
<p className="text-[#525252] text-[16px] font-normal">روزهای کاری: {data.working_days}</p>
</div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d99748.77423686371!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e1!3m2!1sen!2snl!4v1724802057795!5m2!1sen!2snl"
className='w-full h-[470px] rounded-lg mt-4'
className='
w-full rounded-lg mt-4
h-[219px] sm:h-[302px] md:h-[385px] lg:h-[470px]
'
referrerPolicy="no-referrer-when-downgrade"
allowFullScreen=""
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
></iframe>
</div>
</>
components/doctor/detailDoctor/cards/locations/index.js
+2 -2
View File
@@ -4,7 +4,7 @@ function Locations({ doctor }) {
return (
<div>
<p
className="text-[#525252] text-[20px] font-bold"
className="text-[#525252] text-[16px] md:text-[18px] lg:text-[20px] font-bold"
>موقعیت مکانی </p>
<ul className="flex w-full mt-[24px] flex-col justify-center items-start">
{doctor.locations.map((item, idx) => (
@@ -14,7 +14,7 @@ function Locations({ doctor }) {
data={item}
/>
{doctor.locations.length > idx + 1 && (
<span className="w-full h-px bg-[#EFEFEF] block my-[16px]"></span>
<span className="w-full h-px bg-[#EFEFEF] block my-[12px] md:my-[14px] lg:my-[16px]"></span>
)}
</li>
))}
components/doctor/index.js
+1 -1
View File
@@ -6,7 +6,7 @@ function DoctorPage({ doctor }) {
return (
<div className="pt-[120px] mt-[56px] padding-responsive">
<div className="flex items-center justify-between">
<div className="flex items-center justify-start text-[16px] font-normal">
<div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
<p className="text-[#9B9B9B] text-nowrap">متخصص {doctor.expertise} {' >'}</p>
<p className="text-[#525252] text-nowrap mr-1">{doctor.name}</p>
</div>