change design and responsive & pay & detail account & success pay & faield pay & doctor id

This commit is contained in:
Ehsan
2024-08-30 20:22:41 +03:30
parent 451ae76cb1
commit b058066380
33 changed files with 589 additions and 147 deletions
+1 -1
View File
@@ -17,7 +17,7 @@ function PlaceVisit() {
return (
<div className="flex flex-col items-start gap-[19px] justify-start">
<p className="text-[#3B3B3B] text-[16px] font-bold">1. انتخاب محل ویزیت</p>
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">1. انتخاب محل ویزیت</p>
<AutoCompleteSelect
updateData={updateData}
label='درمانگاه'
@@ -2,9 +2,7 @@ import DatePicker from "@/app/component/date/datePicker"
function SelectDatePicker() {
return (
<div>
<DatePicker />
</div>
<DatePicker />
)
}
+1 -1
View File
@@ -3,7 +3,7 @@ import SelectDatePicker from "./SelectDatePicker"
function Time() {
return (
<div className="flex mt-[24px] flex-col items-start gap-[19px] justify-start">
<p className="text-[#3B3B3B] text-[16px] font-bold">2. انتخاب روز</p>
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">2. انتخاب روز</p>
<SelectDatePicker />
</div>
)
+1 -1
View File
@@ -3,7 +3,7 @@ import DateTime from "@/app/component/date/dateTime"
function Hour({ doctor }) {
return (
<div className="flex mt-[24px] flex-col items-start gap-[12px] justify-start">
<p className="text-[#3B3B3B] text-[16px] font-bold">3. انتخاب ساعت</p>
<p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">3. انتخاب ساعت</p>
<DateTime
doctor={doctor}
/>
+1 -1
View File
@@ -4,7 +4,7 @@ import Time from "./Time"
function Date({ doctor }) {
return (
<div className="p-[24px] w-[61%] rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
<div className="p-0 lg:p-[24px] w-full lg:w-[61%] rounded-[8px] border border-solid border-transparent lg:border-[#EFEFEF] bg-transparent lg:bg-[#FFF]">
<PlaceVisit />
<Time />
<Hour doctor={doctor} />
+3 -3
View File
@@ -2,13 +2,13 @@ import React from 'react'
function Address({ doctor }) {
return (
<ul className='mt-[4px] flex flex-col'>
<ul className='hidden mt-[4px] lg:flex flex-col'>
{doctor.address.map((item, idx) => (
<li
key={idx}
>
<div className='flex py-[12px] text-[#616161] text-[14px] items-center justify-start'>
<p className='font-bold'>{`${item.name}: `}</p>
<div className='flex py-[12px] text-[#616161] text-[14px] items-start justify-start'>
<p className='font-bold min-w-[115px]'>{`${item.name}: `}</p>
<p className='font-normal'>{item.location}</p>
</div>
{doctor.address.length > idx + 1 && (
+7 -3
View File
@@ -5,14 +5,18 @@ function Head({ doctor }) {
return (
<div className="flex items-center justify-start gap-[12px]">
<Image
className='
w-[48px] sm:w-[51px] md:w-[54px] lg:w-[56px]
h-[48px] sm:h-[51px] md:h-[54px] lg:h-[56px]
'
src={doctor.img}
alt="profile"
height={56}
width={56}
/>
<div className="flex flex-col items-center justify-start gap-[8px]">
<p className="text-[#3B3B3B] text-[14px] font-bold">{doctor.name}</p>
<p className="text-[#525252] text-[14px] font-medium">تخصص: {doctor.expertise}</p>
<div className="flex flex-col items-start justify-start gap-[8px]">
<p className="text-[#3B3B3B] text-[12px] md:text-[14px] font-bold">{doctor.name}</p>
<p className="text-[#525252] text-[12px] md:text-[14px] font-medium">تخصص: {doctor.expertise}</p>
</div>
</div>
)
+3 -2
View File
@@ -3,12 +3,13 @@ import Head from "./Head";
function Detail({ doctor }) {
return (
<div className="h-screen w-[39%]">
<div className="h-fit lg:h-screen w-full lg:w-[39%]">
<div
className="p-[16px] sticky rounded-[8px] bg-[#FFF] border border-solid border-[#EFEFEF]
className="p-0 lg:p-[16px] sticky rounded-[8px] bg-transparent lg:bg-[#FFF] border border-solid border-transparent lg:border-[#EFEFEF]
top-[calc(12px_+_75px_+_32px)] sm:top-[calc(21px_+_75px_+_45px)] md:top-[calc(30px_+_75px_+_58px)] lg:top-[calc(40px_+_75px_+_78px)]"
>
<Head doctor={doctor} />
<span className="block w-full bg-[#EFEFEF] h-px my-[16px]"></span>
<Address doctor={doctor} />
</div>
</div>
+1 -1
View File
@@ -4,7 +4,7 @@ import Detail from "./detail";
function BookingPage({ doctor }) {
return (
<div
className="flex justify-center gap-[24px] padding-responsive
className="flex flex-col lg:flex-row justify-center gap-0 lg:gap-[24px] padding-responsive
items-stretch pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]">
<Detail doctor={doctor} />
<Date doctor={doctor} />