add prettier formatter to all file
This commit is contained in:
Ehsan
@@ -1,35 +1,37 @@
|
||||
import CircularLoading from "@/app/component/loading/Circular"
|
||||
import { numberToArStyle } from "@/helper"
|
||||
import { CircularProgress } from "@mui/material"
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import { numberToArStyle } from "@/helper";
|
||||
import { CircularProgress } from "@mui/material";
|
||||
|
||||
function ProgressAll({ doctor, loading }) {
|
||||
return (
|
||||
<div className="hidden lg:flex w-full h-fit relative min-w-[145px] max-w-[150px]">
|
||||
<CircularLoading loading={loading} width={120} height={120}>
|
||||
<CircularProgress
|
||||
variant="determinate"
|
||||
value={doctor.total_user_satisfaction}
|
||||
sx={{
|
||||
'& .MuiCircularProgress-circle': {
|
||||
stroke: '#05BA58',
|
||||
strokeLinecap: 'round'
|
||||
},
|
||||
'& .MuiCircularProgress-svg': {
|
||||
borderRadius: '50%',
|
||||
boxShadow: 'inset 0 0 0 11px #D7D7D7'
|
||||
}
|
||||
}}
|
||||
className="!w-full !h-full"
|
||||
/>
|
||||
<div
|
||||
className="flex flex-col justify-center items-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 gap-1"
|
||||
>
|
||||
<p className="text-[#525252] text-[12px] font-normal text-center">مجموع<br />رضایت کاربران</p>
|
||||
<p>{numberToArStyle(doctor.total_user_satisfaction)}%</p>
|
||||
</div>
|
||||
</CircularLoading>
|
||||
return (
|
||||
<div className="hidden lg:flex w-full h-fit relative min-w-[145px] max-w-[150px]">
|
||||
<CircularLoading loading={loading} width={120} height={120}>
|
||||
<CircularProgress
|
||||
variant="determinate"
|
||||
value={doctor.total_user_satisfaction}
|
||||
sx={{
|
||||
"& .MuiCircularProgress-circle": {
|
||||
stroke: "#05BA58",
|
||||
strokeLinecap: "round",
|
||||
},
|
||||
"& .MuiCircularProgress-svg": {
|
||||
borderRadius: "50%",
|
||||
boxShadow: "inset 0 0 0 11px #D7D7D7",
|
||||
},
|
||||
}}
|
||||
className="!w-full !h-full"
|
||||
/>
|
||||
<div className="flex flex-col justify-center items-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 gap-1">
|
||||
<p className="text-[#525252] text-[12px] font-normal text-center">
|
||||
مجموع
|
||||
<br />
|
||||
رضایت کاربران
|
||||
</p>
|
||||
<p>{numberToArStyle(doctor.total_user_satisfaction)}%</p>
|
||||
</div>
|
||||
)
|
||||
</CircularLoading>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProgressAll
|
||||
export default ProgressAll;
|
||||
|
||||
@@ -1,62 +1,73 @@
|
||||
import { Rating } from "@mui/material"
|
||||
import ProgressAll from "./ProgressAll"
|
||||
import StarDI from "@/components/icons/StarDI"
|
||||
import LikeDI from "@/components/icons/LikeDI"
|
||||
import ProgressDetail from "@/app/component/ProfressDetail"
|
||||
import TextLoading from "@/app/component/loading/Text"
|
||||
import CustomLoading from "@/app/component/loading/Custom"
|
||||
import CircularLoading from "@/app/component/loading/Circular"
|
||||
import { Rating } from "@mui/material";
|
||||
import ProgressAll from "./ProgressAll";
|
||||
import StarDI from "@/components/icons/StarDI";
|
||||
import LikeDI from "@/components/icons/LikeDI";
|
||||
import ProgressDetail from "@/app/component/ProfressDetail";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
|
||||
function Chart({ doctor, loading }) {
|
||||
return (
|
||||
<div className='
|
||||
return (
|
||||
<div
|
||||
className="
|
||||
rounded-lg my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] border border-[#EFEFEF] bg-[#FFF]
|
||||
pt-[12px] md:pt-[14px] lg:pt-[16px] pb-[12px] sm:pb-[16px] md:pb-[20px] lg:pb-[24px] px-[12px] sm:px-[16px] md:px-[20px] lg:px-[24px]
|
||||
'>
|
||||
<TextLoading loading={loading} width={130} height={20}>
|
||||
<div className='flex items-center justify-start gap-2.5'>
|
||||
<p className="text-[#616161] text-[14px] font-medium">امتیاز کلی کاربران: {doctor.overall_score} از 5</p>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">(از مجموع {doctor.comments.length} نظر)</p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<div className={`${loading ? 'mt-4 mb-6' : 'mt-0 mb-0'} hidden md:flex`}>
|
||||
<TextLoading loading={loading} width={160} height={20}>
|
||||
<Rating
|
||||
readOnly
|
||||
value={4}
|
||||
size="small"
|
||||
name="read-only"
|
||||
className="!mt-4 !mb-6 !hidden lg:!flex"
|
||||
/>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className="flex items-center justify-start gap-2 my-[12px] md:hidden">
|
||||
<CustomLoading loading={loading} width={130} height={30}>
|
||||
<div className="flex p-1 gap-0.5 items-start justify-center">
|
||||
<StarDI />
|
||||
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">امتیاز: {doctor.point}</p>
|
||||
</div>
|
||||
<div className="flex p-1 items-start gap-0.5">
|
||||
<LikeDI />
|
||||
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
|
||||
</div>
|
||||
</CustomLoading>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center justify-center gap-[50px]">
|
||||
<ul className={`flex w-full flex-col items-start justify-start gap-1.5 ${loading ? 'lg:w-full' : 'lg:w-fit'}`}>
|
||||
{doctor.progress_detail.map((item, idx) => (
|
||||
<TextLoading width='full' height={20} loading={loading}>
|
||||
<ProgressDetail
|
||||
data={item}
|
||||
key={idx}
|
||||
/>
|
||||
</TextLoading>
|
||||
))}
|
||||
</ul>
|
||||
<ProgressAll doctor={doctor} loading={loading} />
|
||||
</div>
|
||||
"
|
||||
>
|
||||
<TextLoading loading={loading} width={130} height={20}>
|
||||
<div className="flex items-center justify-start gap-2.5">
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
امتیاز کلی کاربران: {doctor.overall_score} از 5
|
||||
</p>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
(از مجموع {doctor.comments.length} نظر)
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
</TextLoading>
|
||||
<div className={`${loading ? "mt-4 mb-6" : "mt-0 mb-0"} hidden md:flex`}>
|
||||
<TextLoading loading={loading} width={160} height={20}>
|
||||
<Rating
|
||||
readOnly
|
||||
value={4}
|
||||
size="small"
|
||||
name="read-only"
|
||||
className="!mt-4 !mb-6 !hidden lg:!flex"
|
||||
/>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className="flex items-center justify-start gap-2 my-[12px] md:hidden">
|
||||
<CustomLoading loading={loading} width={130} height={30}>
|
||||
<div className="flex p-1 gap-0.5 items-start justify-center">
|
||||
<StarDI />
|
||||
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
|
||||
امتیاز: {doctor.point}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex p-1 items-start gap-0.5">
|
||||
<LikeDI />
|
||||
<p className="text-[#616161] text-[12px] md:text-[14px] font-normal">
|
||||
{doctor.satisfaction}% رضایت کاربران
|
||||
</p>
|
||||
</div>
|
||||
</CustomLoading>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center justify-center gap-[50px]">
|
||||
<ul
|
||||
className={`flex w-full flex-col items-start justify-start gap-1.5 ${
|
||||
loading ? "lg:w-full" : "lg:w-fit"
|
||||
}`}
|
||||
>
|
||||
{doctor.progress_detail.map((item, idx) => (
|
||||
<TextLoading width="full" height={20} loading={loading}>
|
||||
<ProgressDetail data={item} key={idx} />
|
||||
</TextLoading>
|
||||
))}
|
||||
</ul>
|
||||
<ProgressAll doctor={doctor} loading={loading} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Chart
|
||||
export default Chart;
|
||||
|
||||
@@ -1,23 +1,27 @@
|
||||
import Chart from './chart'
|
||||
import Comment from '@/app/component/comment'
|
||||
import ModalAnswer from './modal/ModalAnswer'
|
||||
import Chart from "./chart";
|
||||
import Comment from "@/app/component/comment";
|
||||
import ModalAnswer from "./modal/ModalAnswer";
|
||||
|
||||
function Comments({ doctor, loading }) {
|
||||
return (
|
||||
<div className='mt-[24px] sm:mt-[27px] md:mt-[29px] lg:mt-[32px]'>
|
||||
<a
|
||||
id="comments"
|
||||
className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
|
||||
></a>
|
||||
<p className="text-[#525252] text-[16px] md:text-[18px] lg:text-[20px] font-bold">نظرات کاربران </p>
|
||||
<div className='mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[32px] flex flex-col md:flex-row gap-y-[20px] items-start md:items-center justify-start'>
|
||||
<p className='text-[#616161] text-[16px] font-normal'>شما هم نظر خود را در مورد این پزشک به اشتراک بگذارید:</p>
|
||||
<ModalAnswer doctor={doctor} />
|
||||
</div>
|
||||
<Chart doctor={doctor} loading={loading} />
|
||||
<Comment data={doctor} loading={loading} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="mt-[24px] sm:mt-[27px] md:mt-[29px] lg:mt-[32px]">
|
||||
<a
|
||||
id="comments"
|
||||
className="absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]"
|
||||
></a>
|
||||
<p className="text-[#525252] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
|
||||
نظرات کاربران{" "}
|
||||
</p>
|
||||
<div className="mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[32px] flex flex-col md:flex-row gap-y-[20px] items-start md:items-center justify-start">
|
||||
<p className="text-[#616161] text-[16px] font-normal">
|
||||
شما هم نظر خود را در مورد این پزشک به اشتراک بگذارید:
|
||||
</p>
|
||||
<ModalAnswer doctor={doctor} />
|
||||
</div>
|
||||
<Chart doctor={doctor} loading={loading} />
|
||||
<Comment data={doctor} loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Comments
|
||||
export default Comments;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { styleDefault } from "@/mui";
|
||||
@@ -10,77 +10,69 @@ import ProgressChange from "@/app/component/ProgressChange";
|
||||
import Link from "next/link";
|
||||
|
||||
function ModalAnswer({ doctor }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant='outlined'
|
||||
onClick={handleOpen}
|
||||
className='!py-[6px] md:!py-2 lg:!py-[9px] !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}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
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 cursor-pointer"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<CloseModalD />
|
||||
</div>
|
||||
<p className="text-[16px]">امتیاز شما به دکتر مهران امینی</p>
|
||||
<Rating
|
||||
className="!my-[24px]"
|
||||
sx={{
|
||||
'& .MuiSvgIcon-root': {
|
||||
width: '12px',
|
||||
height: '12px'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
|
||||
{doctor.progress_detail.map((item, idx) => (
|
||||
<ProgressChange
|
||||
data={item}
|
||||
key={idx}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex flex-col gap-[16px] justify-center items-start mt-[24px]">
|
||||
<p className='text-[#495057] text-[16px] font-bold'>متن نظر</p>
|
||||
<Field
|
||||
type='number'
|
||||
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>
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={handleOpen}
|
||||
className="!py-[6px] md:!py-2 lg:!py-[9px] !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} onClose={handleClose}>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
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 cursor-pointer"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<CloseModalD />
|
||||
</div>
|
||||
<p className="text-[16px]">امتیاز شما به دکتر مهران امینی</p>
|
||||
<Rating
|
||||
className="!my-[24px]"
|
||||
sx={{
|
||||
"& .MuiSvgIcon-root": {
|
||||
width: "12px",
|
||||
height: "12px",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<ul className="flex w-full lg:w-fit flex-col items-start justify-start gap-1.5">
|
||||
{doctor.progress_detail.map((item, idx) => (
|
||||
<ProgressChange data={item} key={idx} />
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex flex-col gap-[16px] justify-center items-start mt-[24px]">
|
||||
<p className="text-[#495057] text-[16px] font-bold">متن نظر</p>
|
||||
<Field
|
||||
type="number"
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalAnswer
|
||||
export default ModalAnswer;
|
||||
|
||||
Reference in New Issue
Block a user