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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
components/account/detailDoctor/Detail.js
+43 -19
View File
@@ -7,53 +7,77 @@ import { Button } from "@mui/material"
function Detail({ doctor }) {
return (
<div className="mt-[8px]">
<div className="">
<ul className="flex flex-col items-start justify-start gap-[24px]">
<li className="flex items-center justify-start gap-[4px]">
<LocationA />
<p className="text-[#616161] text-[16px] font-normal">آدرس: {doctor.location}</p>
<div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
<LocationA />
</div>
<p className="text-[#616161] text-[14px] md:text-[16px] font-normal">آدرس: {doctor.location}</p>
</li>
<li className="flex items-center justify-between w-full">
<div className="flex items-center justify-start gap-[4px]">
<CalendarA />
<div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
<CalendarA />
</div>
<div className="flex items-center justify-start">
<p className="text-[#616161] text-[16px] font-medium">تاریخ نوبت: </p>
<p className="text-[#2F2F2F] text-[16px] font-medium mr-1">13 خرداد 1403</p>
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">تاریخ نوبت: </p>
<p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">13 خرداد 1403</p>
</div>
</div>
<Button
className="!p-1 !flex !items-center !justify-end !gap-[2px]"
variant="text"
>
<p className="!text-[#F17732] !text-[14px] !font-normal">تغییر </p>
<ArrowLeftOrangeA />
<p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
<div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
<ArrowLeftOrangeA />
</div>
</Button>
</li>
<li className="flex items-center justify-between w-full">
<div className="flex items-center justify-start gap-[4px]">
<ClockA />
<div className="w-[18px] h-[18px] md:w-[20px] md:h-[20px]">
<ClockA />
</div>
<div className="flex items-center justify-start">
<p className="text-[#616161] text-[16px] font-medium">زمان نوبت: </p>
<p className="text-[#2F2F2F] text-[16px] font-medium mr-1">ساعت 17:20</p>
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">زمان نوبت: </p>
<p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">ساعت 17:20</p>
</div>
</div>
<Button
className="!p-1 !flex !items-center !justify-end !gap-[2px]"
variant="text"
>
<p className="!text-[#F17732] !text-[14px] !font-normal">تغییر </p>
<ArrowLeftOrangeA />
<p className="!text-[#F17732] !text-[12px] md:!text-[14px] !font-normal">تغییر </p>
<div className="w-[16px] h-[16px] sm:w-[18px] sm:h-[18px] md:w-[21px] md:h-[21px] lg:w-[24px] lg:h-[24px]">
<ArrowLeftOrangeA />
</div>
</Button>
</li>
</ul>
<span className="mt-[28px] mb-[24px] w-full h-px bg-[#D7D7D7] block"></span>
<ul className="flex flex-col items-start justify-start gap-[24px]">
<li className="flex items-center justify-start gap-[8px]">
<TickCircleOrange />
<span
className="mt-[10px] sm:mt-[16px] md:mt-[22px] lg:mt-[28px]
mb-[8px] sm:mb-[13px] md:mb-[19px] lg:mb-[24px]
w-full h-px bg-[#D7D7D7] block"
></span>
<ul className="flex flex-col items-start justify-start gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]">
<li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
<div
className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
>
<TickCircleOrange />
</div>
<p className="text-[#616161] text-[16px] font-normal">فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه ممکن می باشد.</p>
</li>
<li className="flex items-center justify-start gap-[8px]">
<TickCircleOrange />
<li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
<div
className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
>
<TickCircleOrange />
</div>
<p className="text-[#616161] text-[16px] font-normal">لطفا به موقع در مطب حضور داشته باشید.</p>
</li>
</ul>
components/account/detailDoctor/Head.js
+12 -3
View File
@@ -2,16 +2,25 @@ import Image from "next/image"
function Head({ doctor }) {
return (
<div className="flex items-center justify-start gap-[16px] my-[24px]">
<div className="
flex items-center justify-start
gap-[8px] sm:gap-[11px] md:gap-[14px] lg:gap-[16px]
mt-[8px] sm:mt-[13px] md:mt-[19px] lg:mt-[24px]
mb-[12px] sm:mb-[19px] md:mb-[25px] lg:lg:mb-[32px]
">
<Image
className="
w-[40px] sm:w-[58px] md:w-[77px] lg:w-[95px]
h-[40px] sm:h-[58px] md:h-[77px] lg:h-[95px]
"
alt="profile doctor"
src={doctor.img}
height={95}
width={95}
/>
<div className="flex flex-col items-start justify-center gap-[20px]">
<p className="text-[#3B3B3B] text-[20px] font-medium">{doctor.name}</p>
<p className="text-[#616161] text-[16px] font-medium">تخصص: {doctor.expertise}</p>
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">{doctor.name}</p>
<p className="text-[#616161] text-[14px] md:text-[16px] font-medium">تخصص: {doctor.expertise}</p>
</div>
</div>
)
components/account/detailDoctor/index.js
+7 -2
View File
@@ -1,9 +1,14 @@
import Detail from "./Detail"
import Head from "./Head"
function DetailDoctor({ doctor }) {
function DetailDoctor({ doctor, typePay, isPay }) {
return (
<div className="p-[24px] opacity-page w-[41%] rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
<div
className={`p-[24px] opacity-page w-full lg:w-[41%] rounded-[8px] border
border-solid border-[#EFEFEF] bg-[#FFF]
${typePay === 'success' || typePay === 'failed' ? 'hidden md:block' : 'block'}
`}
>
<p className="text-[#3B3B3B] text-[20px] font-bold">جزئیات نوبت</p>
<Head doctor={doctor} />
<Detail doctor={doctor} />
components/account/index.js
+22 -5
View File
@@ -1,15 +1,32 @@
'use client';
import { useState } from "react";
import DetailDoctor from "./detailDoctor"
import Information from "./information";
function AccountPage({ doctor }) {
const [typePay, setTypePay] = useState('default');
const [isPay, setIsPay] = useState(false);
return (
<div
className="padding-responsive pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)]
md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]
flex items-start gap-[24px]"
className="padding-responsive pt-[76px] sm:pt-[114px]
md:pt-[152px] lg:pt-[192px] flex-col lg:flex-row
flex items-start gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]
pb-[99px] sm:pb-[129px] md:pb-[80px] lg:pb-[108px]"
>
<DetailDoctor doctor={doctor} />
<Information />
<DetailDoctor
typePay={typePay}
doctor={doctor}
isPay={isPay}
/>
<Information
isPay={isPay}
typePay={typePay}
setIsPay={setIsPay}
setTypePay={setTypePay}
/>
</div>
)
}
components/account/information/ButtonFixed.js
+15
View File
@@ -0,0 +1,15 @@
import React from 'react'
function ButtonFixed({ children }) {
return (
<div
className="!fixed md:!relative !bottom-0 !right-0 bg-[#FFF] border-0 border-t
md:border-t-transparent border-[#D7D7D7]
!w-full sm:!w-full !p-[16px] sm:!px-[52px] md:!ml-0 md:!p-0 md:!w-full"
>
{children}
</div>
)
}
export default ButtonFixed
components/account/information/detail/Content.js
+3 -3
View File
@@ -1,11 +1,11 @@
function Content({ isConfirmed, children, title }) {
return (
<div className='flex w-full flex-col items-start justify-start gap-[16px]'>
<div className='flex min-h-[32px] items-center justify-start gap-[4px]'>
<div className='flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]'>
<div className='flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]'>
<p className="text-[#525252] text-[14px] font-medium">{title}</p>
{isConfirmed && (
<p
className='py-[2px] px-[5px] leading-[28px] bg-[#05BA58] rounded-[40px] text-[#FFF] text-[12px] font-normal'
className='py-[4px] md:py-[2px] leading-[8px] sm:leading-[14px] md:leading-[21px] lg:leading-[28px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF] text-[10px] md:text-[12px] font-normal'
>تایید شده</p>
)}
</div>
components/account/information/detail/Form.js
+2 -1
View File
@@ -10,7 +10,8 @@ const bime = [
function Form({ changeData, data, updateSelect, isForAnother }) {
return (
<div className="grid mt-[20px] items-start justify-center gap-x-[24px] gap-y-[16px] grid-cols-2">
<div className="grid mt-[12px] sm:mt-[14px] md:mt-[17px] lg:mt-[20px] items-start
justify-center gap-x-[24px] gap-y-[12px] md:gap-y-[14px] lg:gap-y-[16px] grid-cols-1 sm:grid-cols-2">
<Content title='شماره موبایل' isConfirmed={isForAnother ? false : true}>
<EditField changeData={changeData} data={data.phone} name='phone' />
</Content>
components/account/information/detail/index.js
+15 -11
View File
@@ -3,6 +3,7 @@ import Form from "./Form";
import { Button } from "@mui/material";
import AddCircleBlueA from "@/components/icons/AddCircleBlueA";
import ArrowLeftB from "@/components/icons/ArrowLeftB";
import ButtonFixed from "../ButtonFixed";
function Detail({ isForAnother, setIsForAnother, fadeElement, setIsPay }) {
@@ -40,7 +41,7 @@ function Detail({ isForAnother, setIsForAnother, fadeElement, setIsPay }) {
/>
{!isForAnother && (
<Button
className="!flex !items-center !justify-start !gap-[8px] !mt-[24px] !p-1"
className="!flex !items-center !justify-start !gap-[8px] !mt-[12px] sm:!mt-[16px] md:!mt-[20px] lg:!mt-[24px] !p-1"
onClick={() => {
fadeElement(() => setIsForAnother(true))
setData({
@@ -54,16 +55,19 @@ function Detail({ isForAnother, setIsForAnother, fadeElement, setIsPay }) {
<p className="text-[#5559CE] text-[16px] font-medium">دریافت نوبت برای فرد دیگر </p>
</Button>
)}
<Button
className={`
!gap-[4px] !mr-auto !flex !px-[12px] !py-[8px] !min-w-[150px]
${isForAnother ? '!mt-[94px]' : '!mt-[32px]'}`}
variant="contained"
onClick={() => fadeElement(() => setIsPay(true))}
>
<p className="text-[#EFEFEF] text-[16px] font-medium">ثبت اطلاعات</p>
<ArrowLeftB />
</Button>
<ButtonFixed>
<Button
className={`
!flex !w-full md:!w-fit
!gap-[4px] md:!mr-auto !px-[12px] !py-[8px] !min-w-[150px]
${isForAnother ? '!mt-0 md:!mt-[94px]' : '!mt-0 md:!mt-[32px]'}`}
variant="contained"
onClick={() => fadeElement(() => setIsPay(true))}
>
<p className="text-[#EFEFEF] text-[16px] font-medium">ثبت اطلاعات</p>
<ArrowLeftB />
</Button>
</ButtonFixed>
</>
)
}
components/account/information/index.js
+6 -9
View File
@@ -1,14 +1,10 @@
'use client';
import { useState } from "react";
import Detail from "./detail";
import Payment from "./payment";
import Detail from "./detail";
function Information() {
function Information({ typePay, setTypePay, setIsPay, isPay }) {
const [isForAnother, setIsForAnother] = useState(false)
const [typePay, setTypePay] = useState('success');
const [isPay, setIsPay] = useState(true);
const [isForAnother, setIsForAnother] = useState(false);
const [fade, setFade] = useState(false);
const fadeElement = (func) => {
@@ -24,8 +20,9 @@ function Information() {
return (
<div
className={`w-[59%] opacity-page p-[24px] bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]
`}
className={`w-full lg:w-[59%] opacity-page bg-[#FFF] border border-solid border-[#EFEFEF]
rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]
${typePay === 'success' || typePay === 'failed' ? 'bg-transparent border-transparent md:bg-[#FFF] md:border-[#EFEFEF]' : ''}`}
>
<div className={`transition-opacity !duration-300 ease-in ${fade ? '!opacity-0' : '!opacity-100'}`}>
{isPay ?
components/account/information/payment/FailedPay.js
+2 -2
View File
@@ -8,9 +8,9 @@ function FailedPay({ setTypePay, setIsPay, fadeElement }) {
<div className="mt-[7px]">
<div className="flex flex-col justify-center items-center gap-[14px]">
<InfoCircleRedA />
<p className="text-[#D32F2F] text-[20px] font-bold">پرداخت شما انجام نشد.</p>
<p className="text-[#D32F2F] text-[16px] md:text-[18px] lg:text-[20px] font-bold">پرداخت شما انجام نشد.</p>
</div>
<div className="flex mt-[24px] items-center justify-center gap-[24px]">
<div className="flex mt-[32px] sm:mt-[29px] md:mt-[27px] lg:mt-[24px] items-center justify-center gap-[24px]">
<Button
variant="outlined"
onClick={() => fadeElement(() => setIsPay(false))}
components/account/information/payment/Paying.js
+19 -16
View File
@@ -1,28 +1,31 @@
import ArrowLeftB from '@/components/icons/ArrowLeftB';
import { Button } from '@mui/material';
import ButtonFixed from '../ButtonFixed';
function Paying({ setTypePay, fadeElement }) {
return (
<>
<p className="text-[#3B3B3B] text-[20px] font-bold">
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
اطلاعات پرداخت
</p>
<div className='flex justify-between items-center mt-[30px]'>
<p className='text-[#616161] tet-[16px] font-medium'>مبلغ پیش پرداخت (بیعانه) : </p>
<p className='text-[#525252] text-[16px] font-bold'>20،000 تومان</p>
</div>
<span className='bg-[#D7D7D7] h-px w-full mt-[32px] mb-[25px] block'></span>
<div className='flex items-center justify-between'>
<p className='text-[#3B3B3B] text-[16px] font-bold'>مبلغ قابل پرداخت : 20،000 تومان</p>
<Button
className='!gap-[4px] !mr-auto !flex !px-[12px] !py-[9px] !min-w-[157px]'
onClick={() => fadeElement(() => setTypePay('success'))}
variant="contained"
>
<p className="text-[#EFEFEF] text-[16px] font-medium">پرداخت نهایی</p>
<ArrowLeftB />
</Button>
<div className='flex justify-between items-center mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[30px]'>
<p className='text-[#616161] text-[14px] md:text-[16px] font-medium'>مبلغ پیش پرداخت (بیعانه) : </p>
<p className='text-[#525252] text-[14px] md:text-[16px] font-bold'>20،000 تومان</p>
</div>
<span className='bg-[#D7D7D7] hidden md:block h-px w-full mt-[32px] mb-[25px]'></span>
<ButtonFixed>
<div className='flex items-center justify-between gap-2'>
<p className='text-[#616161] md:text-[#3B3B3B] text-[14px] md:text-[16px] font-bold'>مبلغ قابل پرداخت : 20،000 تومان</p>
<Button
className='!gap-[4px] !mr-auto !flex !px-[12px] !p-[7px] md:!py-[9px] !min-w-[157px]'
onClick={() => fadeElement(() => setTypePay('success'))}
variant="contained"
>
<p className="text-[#EFEFEF] text-[16px] font-medium">پرداخت نهایی</p>
<ArrowLeftB />
</Button>
</div>
</ButtonFixed>
</>
)
}
components/account/information/payment/SuccessPay.js
+13 -1
View File
@@ -9,7 +9,19 @@ function SuccessPay() {
<TickCircleGreenA />
<p className="text-[#3B3B3B] text-[20px] font-bold">پرداخت شما با موفقیت انجام شد.</p>
</div>
<p className="text-[#3B3B3B] text-[16px] font-normal mt-[32px] mb-[16px]">برای نمایش نوبت ها به قسمت نوبت های من بروید. </p>
<p
className="text-[#3B3B3B] text-[16px] font-normal
mt-[24px] sm:mt-[26px] md:mt-[29px] lg:mt-[32px]
mb-[24px] md:mb-[16px]"
>برای نمایش نوبت ها به قسمت نوبت های من بروید. </p>
<div className="flex w-full md:hidden flex-col justify-center items-center mb-[32px]">
<span className="w-full block h-px bg-[#EFEFEF]"></span>
<div className="flex items-center justify-between my-[20px]">
<p className="text-[#616161] text-[14px] font-medium">مقدار پرداخت شده: </p>
<p className="text-[#05BA58] text-[14px] font-bold">20،000 تومان</p>
</div>
<span className="w-full block h-px bg-[#EFEFEF]"></span>
</div>
<Button
variant="text"
className="!flex !items-center !justify-center !gap-[4px]"
components/booking/date/PlaceVisit.js
+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='درمانگاه'
components/booking/date/Time/SelectDatePicker.js
+1 -3
View File
@@ -2,9 +2,7 @@ import DatePicker from "@/app/component/date/datePicker"
function SelectDatePicker() {
return (
<div>
<DatePicker />
</div>
<DatePicker />
)
}
components/booking/date/Time/index.js
+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>
)
components/booking/date/hour/index.js
+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}
/>
components/booking/date/index.js
+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} />
components/booking/detail/Address.js
+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 && (
components/booking/detail/Head.js
+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>
)
components/booking/detail/index.js
+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>
components/booking/index.js
+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} />
components/doctor/detailDoctor/cards/comments/chart/ProgressAll.js
+1 -1
View File
@@ -3,7 +3,7 @@ import { CircularProgress } from "@mui/material"
function ProgressAll({ doctor }) {
return (
<div className="hidden lg:flex w-full h-fit relative">
<div className="hidden lg:flex w-full h-fit relative min-w-[145px] max-w-[150px]">
<CircularProgress
variant="determinate"
value={doctor.total_user_satisfaction}
components/doctor/detailDoctor/cards/comments/chart/index.js
+1 -1
View File
@@ -31,7 +31,7 @@ function Chart({ doctor }) {
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
</div>
</div>
<div className="flex items-center justify-center gap-[50px]">
<div className="flex flex-wrap items-center justify-center gap-[50px]">
<ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
{doctor.progress_detail.map((item, idx) => (
<ProgressDetail
components/doctor/detailDoctor/cards/comments/modal/ModalAnswer.js
+27 -7
View File
@@ -2,14 +2,16 @@
import { useState } from "react";
import { styleDefault } from "@/mui";
import { Box, Button, Modal, Rating, TextField } from "@mui/material";
import { Box, Button, Modal, Rating, Slider } from "@mui/material";
import CloseModalD from "@/components/icons/CloseModalD";
import ProgressDetail from "@/app/component/ProfressDetail";
import Field from "@/app/component/Field";
import ArrowLeftD from "@/components/icons/ArrowLeftD";
import ProgressChange from "@/app/component/ProgressChange";
import Link from "next/link";
function ModalAnswer({ doctor }) {
const [open, setOpen] = useState(true);
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
@@ -18,7 +20,8 @@ function ModalAnswer({ doctor }) {
<Button
variant='outlined'
onClick={handleOpen}
className='!py-2 md:!py-2.5 !px-[16px] sm:!px-[23px] md:!px-[29px] lg:!px-[36px] !mr-0 md:!mr-4 !rounded !w-full'
className='!py-2 md:!py-2.5 !px-[16px] sm:!px-[23px] md:!px-[29px]
lg:!px-[36px] !mr-0 md:!mr-4 !rounded !w-full md:!w-fit'
>ثبت نظر</Button>
<Modal
open={open}
@@ -26,9 +29,12 @@ function ModalAnswer({ doctor }) {
>
<Box
sx={styleDefault}
className="!w-full !h-full md:!w-fit md:!h-fit !px-[24px] !pt-[13px] !pb-[30px]"
className="!w-full !h-full md:!w-fit md:!h-fit !px-[24px] !pt-[13px] !pb-[30px] !rounded-none md:!rounded-lg"
>
<div className="w-full flex justify-end">
<div
className="w-full flex justify-end cursor-pointer"
onClick={handleClose}
>
<CloseModalD />
</div>
<p className="text-[16px]">امتیاز شما به دکتر مهران امینی</p>
@@ -43,7 +49,7 @@ function ModalAnswer({ doctor }) {
/>
<ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
{doctor.progress_detail.map((item, idx) => (
<ProgressDetail
<ProgressChange
data={item}
key={idx}
/>
@@ -56,6 +62,20 @@ function ModalAnswer({ doctor }) {
multiline={true}
title='نظر خود را بنویسید...'
/>
<Link
href={`/booking/${doctor.id}`}
className="!mr-auto"
>
<Button
variant='contained'
className='!py-2.5 !px-4 gap-1 !text-[14px] !font-medium !mt-[32px]'
>
دریافت نوبت
<div className='w-[20px] h-[20px]'>
<ArrowLeftD />
</div>
</Button>
</Link>
</div>
</Box>
</Modal>
components/icons/ArrowLeftWD.js
+10
View File
@@ -0,0 +1,10 @@
function ArrowLeftWD() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
<path d="M7.97533 5.44167L2.91699 10.5L7.97533 15.5583" stroke="#EFEFEF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
<path d="M17.0836 10.5H3.05859" stroke="#EFEFEF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
</svg>
)
}
export default ArrowLeftWD
components/icons/TickCircleOrange.js
+1 -1
View File
@@ -1,6 +1,6 @@
function TickCircleOrange() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z" stroke="#F17732" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M7.75 12L10.58 14.83L16.25 9.16998" stroke="#F17732" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>